0

メニューを中央揃えにしたいのですが、テキストアラインを使用してみましたが、まだ結果はありません

以下はhtmlコードです：

<div id="menu" class="clearfix">
  <ul>
    <li><a href="{$base_url}/index.php">HOME</a></li>
    <li><a href="{$base_url}/recent/">WATCH</a></li>
    <li><a href="{$base_url}/tags/">TAGS</a></li>
    <li><a href="{$base_url}/channels/">CHANNELS</a></li>
  </ul>
  <br style="clear:both">
</div>

そして使用されるcss：

#menu {
  width: 100%;
  margin-bottom: 2em;
  margin-top: 5px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #515152;
  text-align: center;
  background-image: url("./images/menu.gif");
}

#menu ul {
  font: bold 11px Arial;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#menu li {
  float: left;
  display: inline;
  background-color: black;
}

助言がありますか？

ありがとうございました。

4

3 に答える 3

2

あなたが持っfloat:leftていliます。その行を取り出します：

#menu li {
  display: inline;
  background-color: black;
}

フロートはもう必要ないので<br style="clear:both">、メニューの下に空白行を入れるだけなので、を取り除くこともできます。

float を適切に使用する方法に関するチュートリアルを次に示します。

フローティングは、段落のテキストを回り込ませながら、画像を片側または別の側に押し出すためによく使用されます

于 2012-09-09T19:35:02.560 に答える
0

#menuタグの内容をtext-align：centerで中央に配置しようとしていると思います。'ul'が含まれているため、これは機能しません。私がすることは、＃menuタグからtext-align：centerを削除することです。

次に、「＃menuul」タグに次を追加します。

margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */

ブロックレベルの要素をページの中央に配置するには、ネストされている親要素の幅よりも小さい幅を指定してから、左側と右側のマージンを自動に設定する必要があります。

于 2012-09-09T19:46:12.343 に答える
0

設定

 #menu ul{
   text-align:center;
 }

そして設定

#menu li{
  margin:0px auto;
}

これにより、上下の余白は 0px のままになりますが、左右の余白が自動的に検出され、均等に中央に配置されます。

また、削除

float:left;

から

#menu li
于 2012-09-09T19:39:42.293 に答える