-3

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

        A           B
        C           D

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

4

3 回答 3

2

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

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;
}
于 2013-07-08T10:59:08.530 回答
1

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

<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 提请注意这个 SO 问题：我应该将输入标签放在标签标签内吗？.
现在答案与屏幕阅读器和 IE7 兼容。

jsfiddle

于 2013-07-08T11:07:39.033 回答
1 
<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>

如果您有感觉，这应该对您有用，只需稍作改动即可。谢谢。

于 2013-07-08T10:56:27.797 回答