Question

我需要显示四个复选框，如下所示

        A           B
        C           D

每行应该有两个？任何人都可以为此建议什么是正确的CSS？他们需要在内部或Div的组合

Answer 1

如果这只是一个固定文件而且不需要内容管理，我会使用列来方便使用。如果需要进行内容管理并且内容可能会发生变化，那么我就会去处理行。

http://jsfiddle.net/FUJMS/5/

HTML：

<html>

    <div class="column one">
        <div class="box A"></div>
        <div class="box C"></div>
    </div>

    <div class="column two">
       <div class="box B"></div>
       <div class="box D"></div>
   </div>

</html>

CSS：

div.column {
    width:50%;
}

div.column.one {
    float:left;
}

div.column.two {
    float:right;
}

div.box {
    width:40px;
    height:40px;
}

Answer 2

<style>
  .item {white-space: nowrap;display:inline; }
</style>
<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">

    <label for="b">b</label>
</div>
<br/> //link break or anything you like
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">D</label>
</div>
</fieldset>

如果你有这种感觉，这应该对你有所改变。感谢。

Answer 3

可能的解决方案之一是将复选框放在标签标签

中

<label for="cb1"><input id="cb1" name="cb1" type="checkbox" /> checkbox1 </label>
<label for="cb2"><input id="cb2" name="cb2" type="checkbox" /> checkbox2 </label>
<label for="cb3"><input id="cb3" name="cb3" type="checkbox" /> checkbox3 </label>
<label for="cb4"><input id="cb4" name="cb4" type="checkbox" /> checkbox4 </label>

并将其设为如下

label {
    display:block;
    width:50%;
    *width:49%; /*for IE7 only*/
    float:left;
}
label[for="cb3"] {
    clear:left;
}

感谢Liam提请注意这个问题：Should I put input tag inside label tag? 现在答案与屏幕阅读器和IE7兼容。

jsfiddle

对齐两个Div Box

3 个答案: