2

私は自分のブログを作成中ですが、まだドメインを持っていないので、ライブではありません（ページとして異なるディレクトリを持つフォルダからサイトを構築しています）。私はブログに取り組んでいて、簡単なナビゲーションメニューを探していました。インターネットで見つけました。私はナビゲーションバーを中央に配置しようとしています。他の人のWebサイトで機能する多くのソリューションを試しましたが、私の場合は機能しません。これはコードです（私はそれを自分の色とナビゲーションタイトルに微調整しました）

<ul id="list-nav">
 <li><a href="../index.html">Home</a></li>
 <li><a href="../books/books.html">Books</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="../contact/contact.html">Contact</a></li>
</ul>

そしてこれはCSSです：

ul.list-nav {
 list-style:none;
 width:525px;
 margin-right: auto;
 margin-left: auto;
}

ul#list-nav li {
 display:inline;
}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width:150px;
 background:#383838;
 color:#eee;
 float:left;
 border-left:1px solid #fff;
 }

ul#list-nav li a:hover {
 margin-right: auto;
 margin-left: auto;
 background:#cccccc;
 color:#000;
 }

「オビ＝ワン・ケノービを助けてください。あなたの唯一の希望です！」

4

3 に答える 3

2

最初のCSSセレクターは、のIDではなく、のクラスをul持つを探しています。最初のCSSルールを次のように変更します。list-navlist-nav

ul#list-nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 525px;
    margin: 0 auto;
}

そして、ナビゲーションバーは魔法のように中央に配置されます。実用的なデモンストレーションについては、このjsFiddleを参照してください> http://jsfiddle.net/TLaN5/。明らかにul、内部の要素の正しい幅に対応するために親の幅を修正する必要がありますが、アイデアを得る必要があります。

于 2012-11-26T22:51:30.010 に答える
0

wrapページ全体を中に入れます<div class="wrap">。コードで2回宣言marginしたので、最初のオカレンスを削除して、次のようにします。

ul#list-nav {
  padding: 0;
  list-style: none;
  width: 725px; //NOTE I have increased the width value.
  margin: 0 auto;
}

また、見つける

ul { 
     display: inline;
     text-decoration: none;
     color: black;}

display: inline;[20行目あたり]ルールを削除します。これで問題が解決するはずです。ここで実際の例を確認してください。

于 2012-11-26T23:52:11.723 に答える
0

ulに定義サイズを指定し、そのコンテンツを中央に配置できます（実際、表示を削除します-インライン）

ul {
width: 960px;
margin: 0 auto;
text-align: center;
}

次に、子li要素をインラインブロックとして表示します。

ul li {
display: inline-block;
}

inline-blockプロパティはie7では機能しないため、最初にブラウザのターゲットを確認してください...

もう1つの方法は、古き良きものを使用することです。

ul li {
float: left;
}

ul:after {
display: block;
content: "";
clear: both;
}

ただし、liはul内の中央に配置されないため、これを動的に実行する場合は（各liにfixedを割り当てずに）javascriptを使用する必要があります。

于 2012-11-27T00:18:49.003 に答える