6

ヘッダーdivとその下にメニューulがあります。私は2つのことを達成したいと思います:

1)ulと同じ幅にする必要があります(外側の垂直境界線は正確に同じ x 位置 2)要素div間の間隔をほぼ等しく保ちたいli

のマージンとパディングに関するいくつかの試行錯誤により、Google Chrome で最初のポイントを大まかに達成しました (このjsfiddleliを参照してください) が、Firefox では が収まらないため、1 行に収まりません。また、ズームイン/ズームアウトすると、最後の行が 2 行目に「こぼれる」傾向があります。liulli

要素を使って試してみましたが、ここでmargin:5px autoはゼロpadding:5px autoを意味するようです。liauto

これは本当に難しい/不可能ですか、それとも明らかなことを見落としていますか?

私も試しwidth:fit-contentsましたが、どちらも役に立ちませんでした。

4

6 に答える 6

15

私はあなたの CSS をかなり編集しました。更新された fiddleを確認してください。

基本的に、これは私がやったことです：

HTML:

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

CSS:

ul {
    width: 960px;
    display: table;
    table-layout: fixed;
}
ul li {
    display: table-cell;
}
ul li a {
    display: block;
}

ul はテーブルとして表示され、li はテーブル セルとして表示され、ヘッダーと同じ幅になります。リ内でアンカーをブロックとして表示し、リ全体を埋めます。それがあなたに合っていることを願っています。

Psは、これを使用cfするulときにクラスを削除してください。

于 2013-08-22T11:31:38.673 に答える
9

欲求不満の仲間の中には、これが役立つと思う人もいると思います。

.main-menu ul li ul li{
  white-space: nowrap;
}
于 2014-08-21T06:05:21.057 に答える
1

このような

ul#mmenu li
{
padding:7px;
}

デモ

于 2013-08-22T11:27:03.687 に答える
0

のパディングを調整する必要があります。パディングul#mmenuを変更したpadding:7px 23px;ところ、1 行のままですが、最後のメニューの右端に空白ができます。

于 2013-08-22T11:19:05.770 に答える
0

tableCSSとを避けたい人のためtable-cellに、ちなみに、いくつかの微調整で使用できることに問題はありませtext-align:justifyんUL。

基本的な HTML:

<ul id='mmenu'>
   <li><a href='#'>Blah Blah Blah Blah</a></li>
   <li><a href='#'>Blah Blah</a></li>
   <li><a href='#'>Blah Blah Blah Blah</a></li>
   <li><a href='#'>Blah Blah</a></li>
</ul>

次の理由により、clearfix を失ったことに注意してください。

CSS:

ul#mmenu{
   width:100%;
   margin:15px 0 10px 0;
   overflow:hidden;
   text-align:justify; /*Added this*/
}

ul#mmenu li{
   letter-spacing:.05em;
   color:#0a93cd;
   /*Now inline blocks instead of blocks floated left*/
   display:inline-block; 
   font:24px arial;
   padding:7px 26px;
   background:#fff;
   border-left:2px solid #0a93cd;
   border:2px solid #0a93cd;
   border-radius:13px;
   text-align:center;
}

/*Now for the hacky part....
  ...justify does not, by design, justify the last row of text
  therfore we need to add an additional, invisible line*/
ul#mmenu:after {
   content: "";
   width: 100%;
   display: inline-block;
}

更新されたフィドル:first-childのスタイルも削除しました

于 2014-08-22T01:10:52.610 に答える
0

li 項目に絶対位置を指定して配置できます (最初は left:0、2 番目: left:100px など... 最後は right:0 など)。そうすれば、ズームしても常に同じ場所に表示されます。

于 2013-08-22T11:29:12.947 に答える