1

我创建了一个导航栏，我希望将其设为 100%。

这是我的 HTML 代码，更清晰

<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">

<title>iPolice</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="css/style.css" type="text/css" />


<ul id="nav" >
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Department</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="Login.aspx">Login</a></li> 
</ul>
</head>

然而，尽管放宽：100%；它仍然保持不变。

在此处输入图像描述

我希望我所有的 5 个选择都能像这样居中并平均分配。但是，如果我的宽度不是 100%，我什至无法做到这一点。

在此处输入图像描述

这是我的导航栏的 CSS

#nav {
 position:absolute;
 left:0%;
 top:0%;
 margin: 0px; 
 padding: 0;
 border: 1px yellow;
 border-bottom: none;
 width:100%;
}

#nav li a, #nav li {
 text-align: center;
    float: left;
}

#nav li {
 list-style: none;
 position: relative;
}

#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: #5FFB17;
 background: #292929;
 background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
 border-right: 1px solid #3c3c3c;
 border-left: 1px solid #292929;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
}

#nav li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

我还尝试将#navbar 的位置更改为相对位置。但是，导航栏的左侧顶部位置不会像我的代码所写的那样为 0%。我真的看不到任何阻止我的导航栏变为 100% 的东西。

在此处输入图像描述

我还尝试将导航栏嵌套在宽度为 100% 的不同 CSS 属性中

<div id="navbarwidth">
<ul id="nav" >
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Department</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="Login.aspx">Login</a></li> 
</ul>
</div>

CSS

#navbarwidth {
width:100%;
position:absolute;
}
4

3 回答 3

3

正如 icktoofay 所说，您的#nav元素占据了整个宽度，但其中的元素向左浮动，并且导航没有背景，所以看起来不是。这是一个修复：

http://jsfiddle.net/DgceP/

li删除和a元素上的浮动并将它们设置为display: inline-block

将背景渐变移动到#nav

开始text-align: center_#navbarwidth

在元素上设置最小宽度，li以便它们具有相似的宽度（除了非常长的宽度）

如果您不希望菜单在小屏幕上换行，请设置 min-width on#navbarwidth或#nav

#navbarwidth {
    width:100%;
    position:absolute;
    text-align: center;
}
#nav {
    background: #292929;
    background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
    position:absolute;
    left:0%;
    top:0%;
    margin: 0px;
    padding: 0;
    border: 1px yellow;
    border-bottom: none;
    width:100%;
}
#nav li a, #nav li {
    text-align: center;
    display: inline-block;
    min-width: 70px;
}
#nav li {
    list-style: none;
}
#nav li a {
    padding: 1em 2em;
    text-decoration: none;
    color: #5FFB17;
    border-right: 1px solid #3c3c3c;
    border-left: 1px solid #292929;
    border-bottom: 1px solid #232323;
    border-top: 1px solid #545454;
}
#nav li a:hover {
    background: #2a0d65;
    background: -moz-linear-gradient(top, #11032e, #2a0d65);
    background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
于 2013-07-23T03:23:21.920 回答
1

问题很可能是因为您的导航栏位于宽度有限的 div 内。因此，将导航栏宽度设置为 100% 只会让它填充它所在的 div（而不是整个页面）。

如果确实如此，只需将导航栏从父 div 中取出或以某种方式调整父 div。（即居中，或使其宽度更大）

于 2013-07-23T02:56:06.773 回答
1

你的导航栏占据了所有的水平空间——就是这样

  1. 它没有高度；和
  2. 你还没有应用背景来查看它。

这些问题有相当明显的解决方案：

  1. 对导航栏及其元素应用显式高度。
  2. 应用背景。

这些项目仍然不会居中，因为您正在做float: left，但这是一个不同的问题。

于 2013-07-23T02:58:02.347 回答