12

ULタグとLIタグで作成された標準のCSSメニューがあります。ページ全体を水平方向にカバーする必要があります（実際のケースではありませんが、状況を単純化するためにこれを使用します）。ただし、アイテムは動的に作成されるため、LIアイテムやマージンをハードコーディングすることはできません。

JavaScriptを使用してこれらの値を設定するソリューションを見てきましたが、実際には避けたいと思います。

最後に、私は設定されているかなり良い解決策を見てきました

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

これにより、IEを除くほとんどのブラウザで目的の動作が作成されます。

何か案は？

編集：回答ありがとうございます。ただし、アイテムを生成するコードは私のものではないため、後でJavaScriptを使用せずにアイテムを作成するときにインラインスタイルを設定することはできません。

4

6 に答える 6

14

インライン要素の高さや幅を設定することはできません。http://www.w3.org/TR/CSS2/visudet.html#inline-width

試すdisplay:inline-block;

ieの修正は次のとおりです。

display:inline-block;
zoom:1;
*display:inline;
于 2009-09-08T18:43:23.217 に答える
14

要素に使用可能なスペース全体を取得させたい場合は、メニュー要素の幅を事前に定義する必要はありません（もちろん、li要素のサイズを等しくするのに役立ちます）。プロパティで作業することにより、この問題を解決できdisplayます。

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

セルの崩壊を避けるためにwidth:1% 必要であることに注意してください。

于 2012-08-23T17:05:31.050 に答える
4

メニュー項目が動的に生成されている場合（つまり、前にいくつあるかわからない場合）、style="width:xx"属性をlisに追加できます（または<style>上部に...または実際に好きな場所に）。、、またはのいずれかでどこにxxすべきか。sもレベル要素である必要があり、edです。width_of_parent_div_in_px/number_of_elements+'px'100/number_of_elements+'%'liblockfloatleft

于 2009-07-30T01:10:04.793 に答える
1 
#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

幅：境界線とパディングを考慮して、横に5つの要素がある場合、18％がほぼ正しい可能性があります。ただし、要素の数、パディングの量などによって異なります。

于 2009-07-30T01:04:23.620 に答える
1

Flexboxを使用することに慣れている場合は、それを行うのは難しくありません。これが彼らのCSSであるため、私が投稿しようとしているコードの完全なクレジットはCSSTricksに行きます。

以下は、ベンダープレフィックスを含む例です。

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }
<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Flexboxの唯一の問題は、IE 9以下をサポートする必要があるかどうかです。そうでない場合、Flexboxを使用しない理由はわかりません。Flexboxのブラウザサポートはここで確認できます。

于 2015-07-01T03:53:19.163 に答える
0

これが私のために働いたものです：

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}
于 2011-12-05T18:16:42.150 に答える