0

How do you centre the links themselves in the navigation bar?

The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.

My 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>

My CSS:

In all 3 responsive size: (mobile, tablet and desktop).

   #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;
     }

Many many thanks in advance!

4

3 回答 3

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 回答
0

将包含元素设置为 text-align: center; 然后将 li 设置为 display: inline-block; 如果 a 标签上没有浮动，则应该这样做。

于 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 回答