1

だから私のhtmlはこれです：

<div id="background">
    <div id="navigation">
    <ul>
        <li>Home</li>
        <li>About Us</li>
    </ul>
</div>

私のCSSはこれです：

#background {
    min-widh: 960px;
}

#navigation {
    min-width: 960px;
} 

#navigation ul {
    min-width: 960px;
} 

#navigation ul li {
    display: inline;
    width: 100px;
    height: 50px;
    background-color: red;
}

これで、幅と高さをどれだけ変更しても、インラインバーが作成されます

#navigation ul li

背景色 (赤) は厳密に文字の周囲にとどまり、他には何もありません。実際の李の幅と高さは、どの数値に変更しても変わらないようです。なぜこれをやっているのですか？

4

1 に答える 1

1

display:inline-block代わりに またはを使用しdisplay:inlineます。

#navigation ul li {
    display: inline-block;
}

ここでjsFiddle

または、同様の効果のために要素をフロートすることもできます。

#navigation ul li {
    float:left;
}

ここでjsFiddle

上記の両方のソリューションとは別に、を使用したい場合はdisplay:inline、高さ/幅を設定しようとするのではなく、パディングを追加するだけです。

#navigation ul li {
    display:inline;
    padding:20px;
}

ここでjsFiddle

于 2013-09-28T04:16:02.810 に答える