html - CSS 灵活布局 : flexible left column and variable fixed right column

Question

我想在一行中显示 div 元素的内容。但是 ul 元素的宽度是未知的，因为它可以有多个子 li 元素。 h2 将始终占据其余空间。每个 li 元素的宽度为 20px。

它看起来像这样:

|----h2------------|li|li|li||
|----h2---------------|li|li||

HTML:

<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

我在 Internet 上找到了很多解决方案，但不确定该选择哪个(正确的解决方案还是骇人听闻的解决方案)。浏览器兼容性不是问题，它只需要在最新版本的 chrome 上工作。

更新:会有多行 div 元素，li 元素应该对齐。

Answer 1

最简单、最紧凑和直接的方法是使用 float 。如果您知道您的元素将有不同的大小，但您不知道它们到底是什么，有 2 种完全灵活的方法可以解决这个问题。

这就是如何使用 display: table 来做到这一点:

http://jsfiddle.net/8uTfp/1/

div {
    display: table;
    width: 100%;
}

h1, ul {
    display: table-cell;
    vertical-align: middle;
}

ul {
  text-align: right;
}

li {
  display: inline-block;
}

这就是使用 flexbox 的方法:

http://jsfiddle.net/8uTfp/

div {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  margin-left: auto;
}

li {
  display: inline-block;
}