Html 保存两列列表中的空白

我试图重新创建一个表行为，其中我有两列，在第二列换行后，它应该可以节省第一列的空间不添加宽度或填充/边距的确定值

编辑：以清除问题。这正是我想要的行为，我不知道为什么列表很难重现：

爱好：
入口，入口，入口，入口，入口，入口，入口，入口，入口，入口

.爱好列表李{
显示：内联；
身高：100%；
}
第一栏{
身高：100%；
}

---

将您的HTML与此

CSS:

您可以使用当前为工作草稿的：

.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; 
}

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

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

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

---

你试过用空格代替吗？如果线太长，我想打断一下。如果它中断，则保留第一列的空白。对于不间断的空格，我总是排很长的队。你想支持什么浏览器？任何新的浏览器都可以，但我的布局都很流畅-所以任何固定宽度的东西都不是我想要的。它很接近，但仍然不能用硬宽度值进行伸缩。我可以用那张旧桌子，看起来真的很好。感谢您提供的支持信息，没有IE 9支持是一个真正的麻烦，虽然。我可以用你的第二个例子。

.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; 
}

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

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