个人中心
gpt4 book ai didi

html - 跨越导航栏 CSS

转载 作者：太空宇宙 更新时间：2023-11-03 18:11:49 25 4
gpt4 key购买 nike

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

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

最佳答案

一个不错的选择是删除大部分 float 和相对定位，而是使用 display:table在 ul 上和 display:table-cell在 li 上秒。这将使您能够在屏幕上拉伸(stretch)导航。试试这个:

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

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

See an Example here

在此示例中，我使用了您的代码，但更改并删除了一些内容。它应该足以让您清楚地知道该怎么做。

关于html - 跨越导航栏 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23577110/

25 4 0
文章推荐： jquery - 一个接一个地显示div，一次显示一个
文章推荐： c# - 内联 if 语句以确定 i++ 或 i-- 在 for 循环中递增
文章推荐： c# - 如何实现根据传递的类型返回对象的方法
文章推荐： python - 我需要脚本工具中记录集参数的下拉菜单