1

私のHTML

<div id="main_navigation">
    <ul><li><a href="/One">One</li></a><li><a href="/Two">Two</li></a><li><a href="/three">Three</li></a>
    </ul>
</div>

私のCSS

#main_navigation ul {
margin: 10px 0 15px 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#main_navigation ul li {
display: inline;
font-size:24px;
}

#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
}

#main_navigation ul li a:hover {
color: #322918;
background-color: #cbc19e;
}

これは完璧に見えますが、ページ上の残りのオブジェクトの幅いっぱいには伸びません。コンテナには次のものがあります。

margin:0 50px 0 50px;

ページ上の他のすべてのコンテナと同様に。幅いっぱいに伸びないのはナビゲーションバーだけです。可能であれば、テーブルや jscript を使用したくありません。提案？

4

3 に答える 3

2 
#main_navigation ul li {
  display: inline-block;
  font-size:24px;
}

#main_navigation ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #cbc19e;
  background-color: #322918;
  width: 200px;
  display: block;
}

display属性をそれぞれinline-blockおよびに変更し、必要に応じblockて設定widthします。

于 2012-06-14T04:32:50.260 に答える
1

基本的に、要素にdisplay: block,float: leftとwidth: 33.3%onを適用<li>して、要素の幅全体を引き伸ばすだけで済みます<ul>。これは、すでに含まれている の 100% になってい<div>ます。

このデモでどのように機能するかをご覧ください。

コードは次のとおりです。

#container {
    margin:0 50px 0 50px;
}

#main_navigation ul {
    margin: 10px 0 15px 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    background: cyan;
    overflow: hidden;
}

#main_navigation ul li {
    margin: 0;
    padding: 0;
    display: block;
    font-size:24px;
    width: 33.3%;
    float: left;
}

#main_navigation ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #cbc19e;
    background-color: #322918;
}

#main_navigation ul li a:hover {
    color: #322918;
    background-color: #cbc19e;
}

HTML コード内のリンクに誤りがあることに注意してください。

そのはず：

 <div id="main_navigation">
  <ul>
   <li><a href="/One">One</a></li>
   <li><a href="/Two">Two</a></li>
   <li><a href="/three">Three</a></li>
  </ul>
 </div>
于 2012-06-14T04:33:14.087 に答える