0

ページの上部に左揃えのナビゲーション バーを配置したいのですが、メニュー項目の前 (つまり、メニュー項目の左側) に、(i) 実質的にメニュー項目よりも大きいフォント サイズですが、(ii) メニュー項目と同じベースラインを持っています。

私が理解していることから、ナビゲーションバーを実行するための推奨/推奨方法は、 float を使用することです<li>。ただし、左側のフローティング リストを使用して、左側のテキストと同じベースラインにメニューを揃える方法を見つけられませんでした。私の現在のCSSとHTMLは次のとおりです。

<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>

<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>

<li>左に浮いたものをコンテナの底に垂直に揃える方法はあります<div>か?

私は言う必要があります: フロートリストの代わりにテーブルを使用することで (vertical-align:bottomメニューで使用して<td>) 意図した効果を簡単に達成できますが、フロートリストが推奨される標準のように見えるので、それが可能かどうか知りたいです彼ら。（私は実際にはアニムスの人々がレイアウトにテーブルを使用することに反対しているように見えることを理解していません.）

4

1 に答える 1

1

フロートを使用する必要はありません。実際、使用しない方が良いです。表示タイプをテーブルセルに設定するだけです

#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}

#nav {
list-style:none;
margin:0;
padding:0;
}

#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}

#nav li#name {
font-size:40px;
width:250px;
}

また、追加のボーダー スタイルは不要でした。セレクターを #nav li および #nav li#name に変更するだけで、#nav li#name にあるものを #nav li#name に置き換えることができます。これは優先度が高いためです。

テーブルは主に読み込み方法が悪いため、コンテンツを読み込む前にテーブル全体を構築する必要があることを理解している限り、個々の要素を使用して好きなように読み込むことができるか、またはそれに影響を与える何かがあると確信しています。その部分をよりよく説明できます。

于 2013-08-31T01:53:10.990 に答える