0

MVC 4 レイアウト ビュー (html、css) を使用しています。

同じ行に 6 つの要素があるメニュー バーを作成したいと思います。ただし、適切に配置されるようにするためだけに、各要素の幅を固定したくありません。その理由は、メニュー項目が許可されていないユーザーから隠されるように、コードを使用してメニュー バーを制御したかったからです。

どうすればそれができますか？私はこれで本当に新しいので助けてください。

これが例です。ユーザー A の場合 (メニュー バーに 5 つの項目が表示されます)。5つの項目すべてがページ上にうまく配置されています。 ここに画像の説明を入力

ユーザー B の場合 (メニュー バーに 4 つの項目しか表示されません)。4つのアイテムすべてがページ上でうまく配置されます. ここに画像の説明を入力

ページ全体の幅を意味します。後ろに空きスペースを残しながら、要素が互いに密着することは望ましくありません。

あなたの助けは大歓迎です! ありがとう！:D

4

2 に答える 2

2

これを行う最も簡単で最も一般的な方法は、CSS を適用した順序なしリストを使用することです。このようなものはあなたが望むことをします:

HTML:

<ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
</ul>

CSS:

ul
{
    list-style-type: none; /* removes the bullet points */
}

ul li
{
    display: block; /* makes each item a 'box' */
    float: left; /* makes them stay on the same line */
}

リストからマージンとパディングを削除するには、追加のスタイル設定が必要です。また、上記の CSS がすべての順序付けられていないリストに適用されるため、リストにクラスを適用する必要があります。

しかし、これはあなたを正しい方向に導くはずです。

アップデート：

このサイトから、次のようにメニューを幅全体に表示できます。

/* this selector could be div#nav instead of nav depending on which tag you wrapped the ul in */
nav {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
margin: 0;
}
于 2013-05-31T08:55:56.807 に答える
0

幅を固定したくない場合は、試してくださいwidth:auto;

そして、ここにデモがあります

于 2013-05-31T08:59:06.650 に答える