1

この質問のコードを使用して、各項目が均等に配置される水平メニューを作成しました。

これが私のバージョンです：

<div id="navigation">
  <ul>
    <li class="first">
      <a href="#" title="Home Page">Home</a>
    </li>
    <li>
      <a href="#">About&ensp;us</a>
    </li>
    <li>
      <a href="#">What&ensp;we&ensp;cover</a>
    </li>
    <li>
      <a href="#">Monitoring&ensp;agencies</a>
    </li>
    <li>
      <a href="#">Publishers</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Contact&ensp;us</a>
    </li>
  <span></span>
</ul>
</div>

そしてCSS：

#navigation {
    text-align: justify;
}

#navigation ul span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

#navigation ul {
    display: inline;
    list-style: none;
}

#navigation ul li {
    display: inline
}

#navigation ul li a {
    display: inline;
    border-right: solid 1px #ccc;
}

#navigation ul li.last a {
    border-right: none;
}

a タグの終わりと li タグの終わりの中間になるように垂直線を右に移動させる方法はありますか?

ここにフィドルがあります。

ここに回答を追加しました。

4

7 に答える 7

3

スペーサー モチーフの追加要素を使用したハック

フィドル参照: http://jsfiddle.net/audetwebdesign/bF6ey/

次の HTML を検討してください。

<div id="navigation">
<ul class="navigation">
  <li class="first">
    <a href="#" title="Home Page">Home</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">About&ensp;us</a>
  </li>
  <li class="spacer-motif">|</li>
  ...
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">Contact&ensp;us</a>
  </li>
</ul>
</div>

リンクの間に追加のリスト項目を追加しました: <li class="spacer-motif">|</li>(はい、私もうんざりしています...)。

CSS は次のとおりです。

#navigation {
    padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
    display: table;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation ul li {
    display: table-cell;
    text-align: center;
    width: 1%; /* force cell to shrink-to-fit text */
    outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
    width: 10%; /* force spacers to take up a lot of space */
    outline: none;
}

#navigation ul li a {
    white-space: pre;
}

レイアウトは、テーブル表示タイプの使用に基づいています。

の場合は、幅を 100% に設定してul使用します。display: tableマージンとパディングの値をゼロにすることを忘れないでください。

には、 とliを使用display: table-cellしtext-align: centerます。

秘訣は、 を設定して表のセルを強制的にテキスト ラベルに合わせて縮小しwidth: 1%、次に をli.spacer-motif設定width: 10%して、スペーサーを強制的に (均等に) 拡張して行を埋めることです。

テキスト リンクが 2 行または 3 行に折り返されないようにするwhite-space: preには、<a>要素 (リンク) で設定します。

セマンティクスのクリーンアップ

ここでの問題は、リンク テキストの幅が異なりtable-cell、右または左の境界線と中央揃えのテキストで単純に 's を使用できないことです。余分な間隔はリンクによって異なり、左右の境界線はリンク テキスト間で均等に配置されません。

これを回避する方法は、余分な要素を追加することです。パイプ (|) を使用しましたが、1px の境界線を持つ疑似要素を追加して中央に配置することもできると思います。

ただし、要素に問題がある場合は、jQuery または JavaScript を使用して挿入できます。

IE 7 のサポート - CSS のハック
IE7 のサポートが必要な場合は、次に従って CSS を調整する必要があります
。

于 2013-05-15T12:05:36.713 に答える
1

ここでこのフィドルを見てくださいHERE

私はいくつかの小さな調整をしました。テキストを変更display:inline;して中央揃えにしました。float:left;

スペースは、私が与えた5pxのパディングから来ています

ul li a
于 2013-05-15T10:03:16.853 に答える
0

うまく機能することpadding-right: 30px;がわかりました。#navigation ul li a

于 2013-05-15T10:32:03.643 に答える
0

リストに追加のリスト要素を挿入し、これらの要素の幅を 1 ピクセルに設定することで、これを機能させました。また、背景色を設定し、ハイパーリンクの境界線を削除しました。

新しいスタイル...

#navigation ul li.line {
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 1px;
    background-color: #ccc;
    height: 24px;
    position: relative;
    top: 5px;
}

#navigation ul li a {
    display: inline;
    line-height: 36px;
    height: 36px;
    text-decoration: none;
    font-size: 18px;
    color: #14328C;
    font-weight: bold;
}

新しい HTML スニペット...

  <li>
    <a href="default.aspx?tabid=154">Publishers</a>
    <li class="line" />
  </li>

ただし、IE7では機能しません。テキストの配置は、コンテンツが含まれていない限り、余分な li を無視するようです。

また、意味的に正しくありません。

フィドル。

于 2013-05-15T11:22:08.593 に答える