Question

我似乎无法让我的导航栏跨越页面宽度并将其自身定位在我已添加的标题下方。有人可以帮助我吗？

<body>
<div id= "header">
  FOOD
</div>

<div id= "navbar">
  <ul>
    <li><a href="">Home </a></li>
    <li><a href="">Favs </a></li>
    <li><a href="">Cusine </a>
      <ul>
        <li><a href="">Asian </a></li>
        <li><a href="">Europe </a></li>
      </ul>
    </li>
    <li><a href="">Recipes </a></li>
    <li><a href="">FAQ </a></li>
    <li><a href="">Contact Us </a></li>
  </ul>
</div>
 </body>

这是我使用的CSS。我一直在增加宽度，但它似乎有不同的宽度。

#navbar
{
 clear: both;
 float: left;
 margin: 0px;
 padding: 0px;
 width: 100%;
 font-family: sans-serif;
 z-index: 1000; 
 position: relative; 
 top: 100px; 
 }

#navbar ul
{
 list-style: none;
 padding: 0px;
 margin: 0px;
 float: right;
 position: relative;
 right: 50%;
 }

 #navbar ul li
 {
 float: left;
 position: relative;
 left: 50%;
 }

 #navbar ul li a 
 {
 display: block;
 margin: 0px;
 text-decoration: none;
 background-color: #735D41;
 color: white;
 font-weight: bold;
 text-align: center;
 border: 1px solid;
 width: 100%;
 }

 #navbar ul li ul li a
 {
 background-color: #735D41;
 color: white;
 }

#navbar ul ul 
{
display: none; 
position: relative;
left: 0px;
right: auto;
}

#navbar ul ul li 
{
left: auto;
margin: 0px;
clear: left;
width: 100%;
}

Answer 1

一个不错的选择是移除大多数浮动和相对定位，而是使用display:table上的ul和display:table-cell上的li。这将使您能够在屏幕上拉伸导航。试试吧：

#navbar ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    width:100%;
    display:table;
 }

 #navbar ul li {
    display:table-cell;
 }

See an Example here

在这个例子中，我使用了你的代码，但改变并删除了一些东西。它应该足以让你知道该怎么做。

跨越导航栏CSS

1 个答案: