0

リンク自体をナビゲーション バーの中央に配置するにはどうすればよいですか?

境界線は流動的で、ナビゲーション ボタンはさまざまな画面サイズに再配置されますが、中央に配置することはできず、常に左側にあります。

私のHTML：

    <div id="centerment">

    <div id="navigation">
    <div id="menu4">
  <ul>
    <li><a href="index.html"> <span class="title"><strong>HOME</strong></span></a> </li>

    <li><a href="about.html"> <span class="title"><strong>ABOUT</strong></span></a></li>

    <li><a href="wood.html"> <span class="title"><strong>WOOD</strong></span> </a> </li>

    <li><a href="contact.html"> <span class="title"><strong>CONTACT</strong></span></a></li>
  </ul>
</div>

私のCSS：

3 つのレスポンシブ サイズ (モバイル、タブレット、デスクトップ)。

   #centerment {
position:relative;
clear: both;
float: left;
margin-left: 0px;
margin-right: 0px;
width: 100%;
display: block;

}



    #menu4 ul {
list-style: none;
font-family: "corbert regular regular";
font-size: 10px;
letter-spacing: 2px;
line-height: 1.2em;
float: left;
clear: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000; 
    }


    #menu4 ul li{
float: left;
     }


     #menu4 ul li a{
display: inherit;
text-decoration: none;
color: #000000;
    text-align: center;
margin-left: 0 auto;
margin-right: 0 auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 170px
    }


    #menu4 ul li a span{
    display:inherit;
    }


    #menu4 ul li a span.title{

     }


    #menu4 ul li a:hover span.title{
color: #000000;
    }


    #menu4 ul li a span.text{
padding: 0px 5px;
font-family: "corbert regular regular";
font-size: 13px;
font-style: normal;
font-weight: 300;
letter-spacing: normal;
line-height: 1.6em;
color: #000000;
visibility: hidden;
    }


    #menu4 ul li a:hover span.text{
    visibility:visible;
     }


    .gridContainer.clearfix #navigation #menu4 ul li a .title {
font-family: Corbert;
     }

よろしくお願いします！

4

3 に答える 3

0

含む要素を text-align: center; に設定します。次に、li を表示するように設定します。a タグに float がない場合は、これで問題ありません。

于 2013-07-29T16:33:29.137 に答える
0

ul を失い、単にスパンを使用することができます。HTML を次のように変更します。

<div id="centerment">
<div id="navigation">
<div id="menu4">
<div class="outer">
<span class="inner"><a href="index.html"><span class="title"><strong>HOME</strong></span>     </a></span>
<span class="inner"><a href="about.html"><span class="title"><strong>ABOUT</strong>    </span></a></span>
<span class="inner"><a href="wood.html"><span class="title"><strong>WOOD</strong></span> </a></span>
<span class="inner"><a href="contact.html"><span class="title"><strong>CONTACT</strong>     </span></a></span>
<span class="finish"></span>
</div></div></div></div>

リストの一番下にある「終了」スパンを維持するようにしてください。これにより、すべてのリンクが正しく配置されます。

次に、これを CSS に追加します。

.outer {text-align: justify; width:70%; margin:0px auto; border-top:1px solid; border-bottom:1px solid;}

.outer span.finish {display: inline-block; width: 100%}

.outer span.inner {display: inline-block; white-space: nowrap}

次に、この CSS で #menu4 ul を #menu4 .inner に変更します。

#menu4 .inner {list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em;
}

「#menu4 ul li a」を「#menu4 a」に変更します

それはそれを行う必要があります。.outer の幅 % を変更して、ナビゲーション全体の幅で遊ぶことができます。

于 2013-07-29T20:32:34.657 に答える
0

#menu4 ulの境界線を取り除き、マージンを-1px auto;にします。、 これを追加：

#menuBox {
  margin: 0 auto;
  width: 53.2em;
  height: 30px;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000; 
}

ulを含めるには。

最初に間違ったリンクを投稿しましたが、正しいリンクは次のとおりです: jsFiddle

于 2013-07-29T15:45:19.690 に答える