0

ちょっと急ぎます、私はおそらくここでばかげているかもしれませんが、とにかく：

私はマージンで中央に配置されたナビゲーションを持っています。これにはリンクのリストがあります。私が抱えている問題は、すべての<li>クラスに css が与えられているためfloat:leftです。それらは左側に配置されます。

例えば：

ナビの例

私が知りたいのは、これらを中央に配置する方法があるかどうかです。

ありがとう

CSS:

section#nav {
    height: 45px;
    margin-bottom:5px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
nav {
    max-width: 700px;
    height: 45px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 auto;
}

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    float:left;
}

nav ul li a {
    color: #FFFFFF;
    margin:0 10px;  
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
    color:#FFFFFF !important;
}

nav ul li a:hover {
    color:#CCCCCC !important;
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

HTML:

<section id="nav">
  <nav>
    <ul class="nav">
      <li class="nav-selected nav-path-selected">
        <a class="nav-selected nav-path-selected" href="/">Home</a>
      </li>
      <li>
        <a href="/about/">About Us</a>
      </li>
      <li>
        <a href="/opportunities/">Opportunities</a>
      </li>
      <li>
        <a href="/inspiration/">Inspiration</a>
      </li>
      <li>
        <a href="/members/">Members</a>
      </li>
    </ul>
  </nav>
</section>
4

5 に答える 5

1

このようなことができます

ul{
    display:block;
    width:100%;
    text-align:center;
}

ul>li{
    display:inline;
}

display:inline の代わりに display:inline-block を使用すると、外観には影響しない可能性がありますが、IE 7 で正しく表示できるようになります

ここをチェックjsfiddle.net/kmcYE/2

于 2012-07-26T22:57:25.390 に答える
0

liあなたのCSSで必要な唯一の調整：

この実用的なフィドルの例を参照してください。

追加

display:inline-block;

削除する

float:left;
于 2012-07-26T22:59:18.883 に答える
0

プロパティを与えnav ulますdisplay: inline-block;。これにより、リストがコンテンツの幅に縮小され、含まれている要素の中央に水平に配置されます。

例： http： //jsfiddle.net/VMqUe/

于 2012-07-26T23:00:53.570 に答える
0

みなさん、ありがとうございました。私はあなたの答えを組み合わせてソリューションを構築しました。

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    display:inline-block;
    display:inline;
}
于 2012-07-27T16:41:14.513 に答える
0

< ul > 要素を < div > 内に配置し、div のサイズを変更してページの中央に配置します。div を明示的な幅の値 (メニュー項目の幅など) に設定し、div の左右の余白を auto に設定している限り、自動的に中央揃えになります。

于 2012-07-26T22:55:50.547 に答える