代码之家  ›  专栏  ›  技术社区  ›  Jon

使用复选框/单选按钮css右对齐和垂直对齐标签

  •  3
  • Jon  · 技术社区  · 14 年前

    我非常接近,在Safari、Firefox和IE8中都有这个功能,但是IE7的标签和单选按钮没有垂直对齐。

    我的HTML是:

    <div id="master-container">
        <fieldset id="test">
        <legend>This is a test of my CSS</legend>
             <ul class="inputlist">
                 <li>
                     <label for="test1">Test 1</label>
                     <input name="test1" id="test1" type="checkbox" disabled="disabled"/>
                 </li>
                 <li>
                     <label for="test2">Test 2</label>
                     <input name="test2" id="test2" type="checkbox" disabled="disabled"/>
                 </li>
             </ul>
        </fieldset>
    </div>
    

    我的CSS是:

    html {
        font-family:Arial,Helvetica,sans-serif;
    }
    #master-container {
        width:615px;
        font-size:12px;
    }
    
    ul.inputlist {
        list-style-type:none;
    }
    ul.inputlist li {
        width:100%;
        margin-bottom:5px;
    }
    ul.inputlist li label {
        width:30px;
        text-align:right; 
        margin-right:7px;
        float:left;
    }
    

    编辑:
    根据建议检查其余的HTML和CSS。我更新了上面的代码,现在它准确地演示了这个问题。如果我接受 font-size 由于 #master-container 它排成一行,但字体大小不正确。我试图添加 字体大小 ul.inputlist li input 但那没有帮助。有什么建议吗?谢谢大家的帮助!

    2 回复  |  直到 11 年前
        1
  •  2
  •   Allan Kimmer Jensen    14 年前

    这可能是你需要的:

    label, input {vertical-align: baseline;}
    

    两个具有相同属性的元素都会有所帮助。同样,基线工作也类似。中间工程在IE7中不同。

    希望它有帮助!

        2
  •  0
  •   attack    14 年前

    在li元素中添加“clear:both”怎么样?

    ul.inputlist li{width:100%;margin-bottom:5px;clear:both}