html - 在列表中创建列

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: tableand 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/