<body>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><a href="#">ERIN</a></li>
</ul>
</div>
<div id="nav-wrapper1">
<ul>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ul>
</div>
</div>
您在上面看到的代码构成了我的导航栏。
下面是CSS：
body
{
overflow-y: scroll;
padding: 0;
margin: 0;
font-family: Arial;
font-size: 16px;
background-color: #F1F1F1;
height: 2000px;
}
#nav
{
background-color: #222;
position: fixed;
width: 100%;
top: 0;
}
#nav-wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav-wrapper1
{
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
#nav ul li
{ display: inline-block; }
#nav ul li:hover
{ background-color: #333; }
#nav ul li a,visited
{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
我的问题是我试图使带有我名字的链接浮动到左侧，而项目编号浮动到右侧。但它们并没有合并成一条线。
首先，让我们了解问题。
您目前有以下CSS两类：
#nav-wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav-wrapper1
{
width: 960px;
margin: 0 auto;
text-align: right;
}
这两个类适用于div元素。div元素是默认block-level元素。这意味着，它们占据html页面上一行的全部空间。因此，您将要做的第一个更改是删除“障碍”。因此，您可以将它们定义为inline-block。
其次，您已将它们定义为960px的宽度。不管是否需要，这都将使它们占据上述空间量。通过定义display:inline-block，它们将仅占用所需的空间量。因此，您无需在其上显式设置width属性。
现在，解决方案
只需修改您的两个CSS类，如下所示：
#nav-wrapper {
margin: 0px auto;
display: inline-block;
float:left;
}
#nav-wrapper1 {
margin: 0px auto;
text-align: right;
display: inline-block;
float: right;
}
这将为您提供所需的东西。
body {
overflow-y: scroll;
padding: 0;
margin: 0;
font-family: Arial;
font-size: 16px;
background-color: #F1F1F1;
height: 2000px;
}
#nav {
background-color: #222;
position: fixed;
width: 100%;
top: 0;
}
#nav-wrapper {
margin: 0px auto;
display: inline-block;
float:left;
}
#nav-wrapper1 {
margin: 0px auto;
text-align: right;
display: inline-block;
float: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}<body>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><a href="#">ERIN</a>
</li>
</ul>
</div>
<div id="nav-wrapper1">
<ul>
<li><a href="#">item #2</a>
</li>
<li><a href="#">item #3</a>
</li>
<li><a href="#">item #4</a>
</li>
<li><a href="#">item #5</a>
</li>
</ul>
</div>
</div>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句