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元素的指標設置，因為絕對定位的元素不會強制布局。 我希望這有幫助。