3

4 つの項目を持つメニュー リスト項目を作成しようとしていますが、何らかの理由で 1 行に収まりません。ネストされた div でネストしようとしましたが、うまくいきませんでした。を追加すると問題が発生し始めますpadding: 10px;。

これが私が持っている最新の HTML と CSS です。

HTML:

<div id="header">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#menu {
    margin: 0;
    padding: 0;
}

#menu li {
    display: block;
    float: left;
    margin: 0;
    width: 25%;
    background-color: gray;
    padding: 10px;
}

そのためのjsfiddleもあります：http://jsfiddle.net/GLh92/1/

ご覧のとおり、1 行に収まりません。ここでも応答性の懸念があります。そのため、異なる画面解像度では 1 行に収まる必要があります。

これをきれいな方法で行う方法はありますか？

4

6 に答える 6

5

要素で使用box-sizing: border-boxします。liこれにより、パディングが幅計算の一部になります。

http://jsfiddle.net/ExplosionPIlls/GLh92/5/

于 2013-03-19T19:04:13.650 に答える
4

box-sizing css プロパティを調べると、あなたの人生が変わります。

#menu li {
    display: inline-block;
    float: left;
    margin: 0;
    width: 25%;
    background-color: gray;
    padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2013-03-19T19:04:12.413 に答える
1

解決策は、パディングが実際の幅に追加されるため、タグ<a>の代わりにタグにパディングを追加することです。<li>

  1. パディングを削除する<li>
  2. padding: 10px;に追加<a>
  3. <a>タグを閉じる

http://jsfiddle.net/GLh92/7/

HTML:

<div id="header">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#menu {
    margin: 0;
    padding: 0;
}

#menu li {
    display: block;
    float: left;
    margin: 0;
    width: 25%;
    background-color: gray;
}

#menu li a {
    display: block;
    padding: 10px;
}
于 2013-03-19T19:05:44.383 に答える
0

問題は、各li要素の幅を25％に設定していることです。4つのリスト要素があります。パディングがない限り問題ありません（25 * 4 = 100）。ただし、パディングを追加すると、要素の1つが次の行に移動します。（25 * 4 + 10（パディング）> 100）

widthの値を別の行に変更します15％

#menu li {
display: inline-block;
float: left;
margin: 0;
width: 15%;
background-color: gray;
padding: 10px;

}

http://jsfiddle.net/GLh92/9/

于 2013-03-19T19:07:22.287 に答える
0

パディングは、要素に幅や高さを追加します。li 要素の子でパディングまたはマージンを処理する必要があります。

于 2013-03-19T19:03:57.097 に答える
0

言及padding:10px;すると、アイテムの幅も広がり<li>ます。だからあなたは世話をする必要がありますwidth:20%;

これを試して：

#menu li {
    display: block;
    float: left;
    margin: 0;
    width: 20%;
    background-color: gray;
    padding:10px;
}

それは同じ行の下になります。これはあなたが探しているものですか？

于 2013-03-19T19:04:42.777 に答える