Question

您好我尝试使用浮动CSS元素居中导航菜单，但无法正常工作。有没有人有任何建议？

<header>
     <div id="top-banner">
   <img src="Images/headerlines.png" alt="lines">
   </div>
     <div id="logo">
   <img src="Images/logo.png" alt="logo">
     </div>
<nav>
  <ul class="nav">
    <li><a href="text.html">About</a></li>
    <li><a href="tables.html">Price</a></li>
    <li><a href="forms.html">Contact us</a></li>
  </ul>
</nav>
   </header>

的CSS

.nav li{
    width:960px;
    list-style:none;
    float:left;
}

.nav a {
display:block;
text-align:center;
width:320px; 
text-decoration:none; 
}

对不起伙计们，这是我第一次在stackoverflow上发帖提问。

Answer 1

你可以这样做：）

＆＃13;

.nav  {
   width: 960px;
   margin: 0px;
   padding: 0px;
   list-style: none;   
   text-align: center;
 }
.nav li{
  display: inline-block;  
}
 .nav a {       
   text-decoration: none;
   margin: 0px 30px;
 }

＆＃13;

<header>
  <div id="top-banner">
    <img src="Images/headerlines.png" alt="lines">
  </div>
  <div id="logo">
    <img src="Images/logo.png" alt="logo">
  </div>
  <nav>
    <ul class="nav">
      <li><a href="text.html">About</a>
      </li>
      <li><a href="tables.html">Price</a>
      </li>
      <li><a href="forms.html">Contact us</a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 2

添加

margin-left:50%;

在“nav”类中

使用浮动中心导航菜单

2 个答案: