Question

我正在尝试重新创建一个表行为，其中我有两列，在第二列的换行符之后，它应该保存第一列的空间。不添加宽度或填充/边距的确定值。

编辑：要清理。这正是我想要的行为，我不知道为什么重新创建列表很难：http://jsfiddle.net/tLtLM/1/

<ul class="hobby-list">
   <li class="first-column">Hobbies:</li>
   <li><span>Entry, entry, entry, entry, entry, entry, entry, entry, entry</span></li>
</ul>

.hobby-list li{
display:inline;
height:100%;
}

li.first-column{
height:100%; 
}

http://i.imgur.com/DRyvo.png

Answer 1

将HTML用于此......

CSS：

.hobby-list li
{
    display:inline-block;
    vertical-align:top;
}
.hobby-list li:nth-child(1)
{
    width:80px;
}
.hobby-list li:nth-child(2)
{
    width:210px;
}

Answer 2

您可以使用目前工作草案的Flexible Box Layout Module：

.hobby-list {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

.hobby-list li + li {
    -moz-box-flex: 1;  
    -webkit-box-flex: 1;  
    box-flex: 1; 
}

有关浏览器支持信息，请参阅this。对于不支持flexbox的浏览器，您可以使用以下内容：

.hobby-list {
    display: table-row;
}

.hobby-list li {
    display: table-cell;
}

从两列列表中保存空白

2 个答案: