Question

我正在创建一个反馈系统，如果有“不愿意”，“未就绪”，“就绪”，“完全就绪”等5个复选框的问题......

每个复选框在复选框上方的编号为1到5。由于客户端需要为复选框添加不同的标签，因此它们的长度会有所不同，因此需要使用CSS进行更改而不是修复。

这是我设计师在CSS中创建的Photoshop模型。

我怎么能像这样对齐复选框上方的数字？

我已经有了外面的框，以及数字部分的开头：

CSS：

.questionBlock {
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 700px;
    min-height: 40px;
    background-color: rgb(246,246,246);
    margin-top: 20px;
    background-image: url('../images/bar.png');
    background-repeat: repeat-x;
    padding: 4px 0 0 10px;
}
.questionBlockExpand {
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 700px;
    height: 100px;
    background-color: rgb(246,246,246);
    margin-top: 20px;
    padding: 10px 0 0 10px;
    margin-top: 20px;
}
    .innerQuestionBlock {
        postion:relative;
        width:650px;
        background-color:rgb(204,204,204);  
        padding:5px 5px 5px 5px;
    }

HTML：

<div class="questionBlock">At the end of the session ask the Feedback Recipient the following question:
    <div class="arrow" id="arrowsection1" onclick="toggle_visibility('section1');"></div>
    <div class="questionBlockExpand" id="section1" style="display:none;">
        <div class="innerQuestionBlock"><span class="red">1 2 3 4 5</span>

        </div>
    </div>
</div>

Answer 1

看模型我会用表

<table>
<tr>
   <td>11</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
</tr>

<tr>
   <td colspan="5">Some other content comes here<td>
</tr>

<tr>
   <td><input type="checkbox">Lorem</td>
   <td><input type="checkbox">Ipsum</td>
   <td><input type="checkbox">Dolor</td>
   <td><input type="checkbox">Lorem</td>
   <td><input type="checkbox">Amit</td>
</tr>

</table>

Answer 2

您可以使用百分比而不是px值。所以，假设您有两个列表（<ul>）：一个包含数字，另一个包含答案。

<ul>都有width:100%，因此他们会获取父元素的宽度。在这些列表中，每个项目都有width:20%（100％/ 5 = 20％）

这将使它非常动态，而不使用讨厌的表。

这也是JSfiddle。

PS：如果您想要添加填充物，那么它必须以百分比形式添加，并且数量将减少宽度

Answer 3

建议您使用display:table的DIV或UL。主要原因是，您要显示的信息不是语义上的表格数据。它必须在布局方面做得更多。

请看这个小提琴： http://jsfiddle.net/F3LsL/1/

想法是在div中使用浮动div作为顶部的计数器数字，具有预定义的宽度。然后使用列表或其他div来显示宽度相同的复选框。

例如：

div.counters > div {
    float: left;
    width: 20%;
    display: table-cell;
}

Answer 4

最简单的 demo

简单的想法是绘制table显示并为number和checkbox分配相同的样式，如下所示

<强> CSS

.chkbx {
    width:100%;
}
.ratings {
    display:table;
    width:100%;
    border:1px solid #F00;
}
.ratings > span {
    display:table-cell;
    border:1px solid #000;
    width:20%;
}

<强> HTML

<div class="chkbx">
    <div class="ratings"> 
        <span class="bx">1</span>
        <span class="bx">2</span>
        <span class="bx">3</span>
        <span class="bx">4</span>
        <span class="bx">5</span>

    </div>

    <div class="ftext"> Some full text here </div>

     <div class="ratings"> 
         <span class="bx">Lorem<input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>
         <span class="bx">Lorem <input type="checkbox" /></span>

    </div>
<div>

CSS - 对齐复选框上方的数字？

4 个答案: