テキストが折り返されるときの水平リストアイテムの幅
前
私は水平メニューを持っています：https：//jsfiddle.net/4dzrto3v/2/
私が達成したいのは、テキストを折り返すときにアイテムの幅を狭くすることです。2番目の要素を見ると、右側に最小限に抑えたいスペースがあります。
#nav {
width: 100%;
height: 4em;
background: #F0C000;
padding: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
display: block;
font-size: 1em;
text-transform: uppercase;
height: 4em;
padding-right: 1em;
max-width: 8em;
border-right: 1px solid #fff
}
#nav a:link, #nav a:active, #nav a:visited , #nav a:hover {
color: #444;
text-decoration: none;
}
#nav li:hover {
background-color: #fff;
}<ul id="nav">
<li>First</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element with long text</li>
<li>Fifth</li>
</ul>max-widthプロパティを削除すると、単語の区切りはなく、テキストは1行になります。
これが私が欲しいメニューのイラストです（2番目の要素の幅に注意してください）。
KCarnaille
li要素でfloatプロパティを使用する代わりに、flexを試してみることができます。
#nav{
width: 100%;
height: 4em;
background: #F0C000;
padding: 0;
list-style: none;
display:flex;
}
#nav li{
position: relative;
font-size: 1em;
text-transform: uppercase;
height: 4em;
padding-right: 1em;
border-right: 1px solid #fff
}
テキストの長さに応じてリスト要素のサイズが自動的に変更されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
テキストが折り返されるときに複数のdivからのアイテムを水平方向に整列
- 2
Flexboxレイアウトの幅が等しい（段落テキストが折り返されていません）
- 3
カスタム箇条書きを使用するときに折り返されるliテキストの整列
- 4
テキストが折り返されているときにdivの幅が正しくないのはなぜですか？
- 5
フレックスボックスアイテムが列モードで折り返されると、コンテナの幅が拡大しません
- 6
テキストが折り返されるときに画像の下にパディングを残す方法
- 7
リストアイテムのテキストはアイコンの下で折り返され続けます
- 8
テキストが折り返されているときにテキストをiFrameの下の中央に配置する方法
- 9
テキストが折り返されているときにテキストをiFrameの下の中央に配置する方法
- 10
テキストが次の行に折り返されるときに異なるスタイルを追加する
- 11
WindowsPhoneアプリ-デバイスの幅に応じてテキストを折り返す方法
- 12
アイテムのテキストの折り返しを防ぐ方法
- 13
アイテムが繰り返されても、別のリスト内のリストからアイテムのインデックスを見つける
- 14
リストを繰り返しながらリストからアイテムを削除すると、他のすべてのアイテムがスキップされるのはなぜですか
- 15
text-wrap div内の絶対位置のテキストは、幅と高さが折り返しの100％で固定されています
- 16
N回繰り返される可変アイテムのリストの作成
- 17
ConstraintLayoutで使用すると、ボタンのテキストが折り返されません
- 18
アイテムが選択されたときにアイテムのリストを更新する
- 19
リストアイテムの画像がhtmlで繰り返されます
- 20
繰り返されるリストアイテムの実行を特定する
- 21
含まれているdivが縮小するときに、テキストが複数行に折り返されるのを防ぎますか？
- 22
UILabelがテキストを正しく折り返さないことがある（自動レイアウト）
- 23
リスト内の繰り返されるアイテムのPythonリストインデックス
- 24
奇妙なテキストがliで折り返される
- 25
テーブルの列幅とテキストの折り返しを修正する方法に関する問題
- 26
水平リストアイテムと垂直リストアイテムの間隔が異なる
- 27
大きなno-wrapdivの幅でテキストを折り返す
- 28
ドキュメントの読み込み時にテキスト内部が折り返されると、DIVの高さが正しく計算されない
- 29
AssertJ：リストの抽出から最初のアイテムを取得すると、代わりにリストが返されます
コメントを追加