CSS灵活布局：灵活的左列和可变的固定右列

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>

我在互联网上找到了许多解决方案，但不确定要选择哪种解决方案（正确的解决方案vs hacks）。 浏览器兼容性不是问题，它只需要在最新版本的chrome上运行即可。

更新：div元素将有多行，并且li元素应对齐。

Answer 1

您可以向左浮动h2 ，向右浮动ul 。

div h2 { float: left; }
div ul { float: right; }

Answer 2

最简单，最紧凑，最直接的方法是使用浮点数。 如果您知道元素的大小会有所不同，但是您不知道它们的确切大小，则有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;
}

Answer 3

如果div的高度和列表项的高度是固定的并且是已知值，则可以尝试以下CSS（注意，我添加了CSS类）：

.container{
  height: 30px;
  position: relative;
}
.container ul{
  padding: 0; margin: 0;
  /* Other reset rules here ... */
  position: absolute;
  top: 0;
  right: 0;
}
.container ul li{
  display: inline;
  float: left;
  height: 30px;
  /* Other format rules here ... */
}

如果未指定div的高度，则它将由h2元素的指标设置，因为绝对定位的元素不会强制布局。 我希望这有帮助。