Question

如何将链接本身置于导航栏中心？

边框是流畅的，导航按钮会自行重新排列到不同的屏幕尺寸，但我不能将它们放在中间，而是始终在左边。

我的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;
     }

许多人提前感谢！

Answer 1

摆脱＃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

Answer 2

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

Answer 3

您可以丢失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的宽度％以使用整个导航的宽度。

将链接置于导航栏中心

3 个答案: