Question

我正在尝试在无序列表中创建两列。我有点成功，但是，我不想指定ul和li span的宽度，而是占用其父级的所有宽度（即div）。我该怎么做？感谢

CSS

div {
    width:300px;
}
ul {
    width:200px;
}
li span {
    width: 170px;
    display:inline-block;
    padding-left: 10px;
    vertical-align: top;
}

HTML

<div>
    <ul>
        <li>
            <input type="checkbox" value="1" name="someName[]"><span>Some short text</span>
        </li>
        <li>
            <input type="checkbox" value="2" name="someName[]"><span>Some very very very very very very long text</span>
        </li>
        <li>
            <input type="checkbox" value="3" name="someName[]"><span>Some short text</span>
        </li>
    </ul>
</div>

Answer 1

如果您不关心支持IE7，可以使用display: table和display: table-cell：

li { display: table; }
li > * { display: table-cell }

http://codepen.io/anon/pen/yoGAt

Answer 2

用

替换你的CSS

div {

}
ul {

}
li span {

    display:inline-block;
    padding-left: 10px;
    vertical-align: top;
}

Answer 3

div {
    width:300px;
}
li input { 
    position: absolute; 
}
li span {
    display: inline-block;
    margin-left: 30px;
    vertical-align: top;
}

http://jsfiddle.net/mn7QS/

在列表中创建列

3 个答案: