0

div要素の内容を1行で表示したい。ただし、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>

私はインターネット上で多くの解決策を見つけましたが、どれを選ぶべきかわかりません（適切な解決策とハック）。ブラウザの互換性は問題ではなく、最新バージョンのChromeでのみ機能する必要があります。

更新：div要素の複数の行があり、li要素は整列する必要があります。

4

3 に答える 3

1

h2左右に浮かせることができますul。

div h2 { float: left; }
div ul { float: right; }
于 2013-02-23T19:09:16.323 に答える
1

最も単純で、最もコンパクトで簡単な方法は、フロートを使用することです。要素のサイズが異なることはわかっていても、要素がどうなるか正確にはわからない場合は、これを行うための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;
}
于 2013-02-24T03:07:31.037 に答える
-1

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要素のメトリックによって設定されます。これがお役に立てば幸いです。

于 2013-02-23T19:13:52.557 に答える