0

我在网站标题下方有一个导航栏，但我想将导航栏中的第一个和最后一个项目与标题的开头和结尾对齐。我没有实时预览，但我附上了一张图片。我可以让它在一个浏览器中排列，但是当我在另一个浏览器中打开它时，它又关闭了。有没有一种简单的方法来排列文本以便它适用于所有内容？谢谢你

截屏

HTML：

<body onload="play()">
    <div class="heading">UPRISING</div>
    <div class="container_12"> 
       <div id="topnav" align="center">
         <ul id="list-nav">
           <li><a href="home.html">HOME</a></li>
           <li><a href="about.html">ABOUT</a></li>
           <li><a href="trailer.html">TRAILER</a></li>
           <li><a href="stills.html">STILLS</a></li>
           <li><a href="news.html">NEWS</a></li>
           <li><a href="contact.html">CONTACT</a></li>
           <!-- <li><a href="distribution.html">DISTRIBUTION</a></li> -->
         </ul>
       </div>

<!-- START OF CONTAINER -->

  <div class="trailer">
    <img id="imgHolder" />    
  </div>
 </div> <!-- END OF CONTAINER 12 -->

CSS：

#topnav li {
  margin-right: 110px;
}

#topnav li:nth-last-child(1) {
  margin-right: 0px;
}
4

3 回答 3

2

您可以与text-align: justify

查看演示

于 2012-04-08T17:45:05.353 回答
1

这是一种需要好的旧表的问题。

<table id="list-nav">
     <tr>
           <td><a href="home.html">HOME</a></td>
           <td><a href="about.html">ABOUT</a></td>
           <td><a href="trailer.html">TRAILER</a></td>
           <td><a href="stills.html">STILLS</a></td>
           <td><a href="news.html">NEWS</a></td>
           <td><a href="contact.html">CONTACT</a></td>          
     </tr>
</table>

宽度将被均匀分布的问题解决。

或者...

#list-nav li:last-child { text-align: right; }
于 2012-04-08T17:51:26.293 回答
0

为列表项设置固定宽度。将第一个向左对齐，最后一个向右对齐，中间的所有应该居中对齐。这样，您就不会任由字体渲染器摆布。

使用 CSS 更新：

#topnav li {
    text-align: center;
    width: Xpx; /* X is total width divided by number of list items */
}
#topnav li:first-child {
    text-align: left;
}
#topnav li:last-child {
    text-align: right;
}
于 2012-04-08T17:27:26.587 回答