1

これは私のhtmlコードです:

<div id="menu">
 <ul>
  <li>Home</li>
  <li>My blah</li>
  <li>Lorem ipsum</li>
  <li>Dolor amet</li>
  <li>photogallery</li>
 </ul>
</div>

これは私のCSSです：

#menu li {
 display: inline;
 list-style-type: none;
}

#menu幅は#header-wrap800pxです。UL 内のテキストを 800px の #menu と同じサイズに拡張したい。margin-leftandではできません。margin-right空白が残っているか、不要なli別の行に移動しているためです。

CSSに追加できる要素はありますか?それはテキストを800pxに拡張しますか?

ここに画像の説明を入力

s には複数の単語が含まれているword-spacingため、使用できません。li

4

3 に答える 3

5

displayプロパティを に指定しましたinline。インライン要素はコンテンツの幅に折りたたまれます。

幅を設定したい場合は、またはに変更displayします。blockinline-block

#menu li {
 display: inline-block; /*compensate for spaces in the source if using this*/
 width: 20%; /* for 5 li's (100%/5)*/
 margin: 0;
 padding: 0;
 text-align: center; /* optional */
 list-style-type: none;
}



#menu li {
 display: block;
 float: left;
 width: 20%; /* for 5 li's (100%/5)*/
 margin: 0;
 padding: 0;
 text-align: center; /* optional */
 list-style-type: none;
}

編集: 7 つの LI の場合、幅のパーセンテージを 14.25% に変更します。これにより、右側に少しスペースができます。これは、リスト コンテナーを中央揃えにすることで調整できます。

編集: FAngel が指摘したように、inline-block要素には書式設定スペースが透けて見えるという厄介な習慣があるため、block+floatアプローチがより望ましいです。

于 2013-04-30T13:17:56.190 に答える
5

この SO 投稿は、必要なものに役立つはずです

CSS - 利用可能なすべてのスペースを埋めるための水平方向のナビゲーション リスト項目

CSS は次のようになります。

 #menu ul {
        list-style: none;
        margin:0;
        padding:0;
        display: table;
        width: 100%;
    }
    #menu li {
        text-align: center;
        display: table-cell;
    }
于 2013-04-30T13:19:13.057 に答える
0

楽しみのために、それを使わずにそれを行う別の方法display: tableは、最終的なものを unfloat して、<li>それを与えることoverflow: hidden;です:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <style>
        .wrapper {width: 800px; margin: 0 auto;}

        ul {list-style: none; margin:0; padding:0;}

        ul li {float: left;}

        ul li.last {float: none; overflow: hidden;}

        li a {
            color: #222;
            text-decoration: none;
            display: block;
            line-height: 1.5em;
            background: #e7e7e7;
            padding: 0 62px;
        }

        li.last a {padding: 0; text-align: center;}

        li a:hover, li a:focus {background: #222; color: #fff;}
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">ipsum</a></li>
            <li><a href="#">dolor</a></li>
            <li><a href="#">sit</a></li>
            <li class="last"><a href="#">amet</a></li>
        </ul>
    </div>
</body>
</html>

もちろん、の代わりに , をclass="last"使用li:last-childすることもできますが、このクラスにより後方互換性がわずかに向上します。ただし、最近では少し時代遅れになっている固定幅のデザインに依存しています。

于 2013-04-30T14:00:23.353 に答える