Question

我正在尝试在我的网站上创建一个水平导航栏，我想使用CSS将其紧密放置在我的网站名称标题下，并将左侧图标后面的导航栏背景的一部分放置。这是我的代码

<!doctype html>
<html>
 <head>
<meta charset="UTF-8">
 <title>Oldnut.com</title>
 <link href="css/main.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;

function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}

function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";

setupPicChange();}

</script>

</head>

 <body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>

主页

Preassmbled

CPU

GPU

<div>
<img id="image" src="images/image1.jpg" alt="picture">
</div>

<div id="deals">

</div>

</div>
<div id="foot"
</div>
</div>


</body>
</html>

在这里看不多，我猜我正在做的事情和我的CSS

@charset "UTF-8";
body{background-image:url(../images/bg_bodytakeover.png);
}

#wrapper{
margin-left:auto;
margin-right:auto;
width:1000px;   
}
.nut-image {
z-index: 1000;
position: relative;
}
#content{
margin-left:10px;
margin-right:10px;
padding-bottom:20px;
box-shadow:0px 0px 20px 3px;
border-radius:4px;
background-color:#FFFFFF;
height:600px;
position: relative;
}

#banner{
margin:auto;
position: relative;
}

#img{
float:left;
}

#top{
float: left;
color: #FF6600;
text-align: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed",     Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 75pt;
text-shadow: 2px 2px #FFFFFF;
text-transform: uppercase;
}

nav {
position: absolute;
width: 100%;
background: #FF6600;
top: 110px;
}

#list-nav{
list-style-type:none;
margin:0;
padding:0;
width:calc(100% - 192px);
float:right;
top: 125px;
}

#list-nav li{
float:left;
width: 25%;
padding: 0;
margin: 0;
}

#list-nav li a{
text-decoration:none;
width:100%;
background:#FF6600;
color:#eee;
float:left;
text-align:center;
display:block;
}

#list-nav li a:hover{
background:#1d8ed0;
color:#000;
}

现在我想让我的导航栏非常接近巨型标题文本和橙色线条背景，以便在图标下方到达白色内容边框的末尾。我尝试了各种填充和边距混合，但它真的只是弄得一团糟。我已经广泛地环顾四周，但似乎没有什么对我有效，对别人有用。或者我无法得到我想做的所有事情。有人有任何提示吗？

编辑：我已经尝试了很多填充来让导航栏拉伸屏幕，但是它会一直打破按钮的均匀分离和悬停效果，还有另一种方法可以均匀地对它们进行排序吗？

* 第二次编辑新问题 * 我想让我的图像在5秒后在两者之间来回变换。我看过其他网站的代码，不知道为什么它不起作用。有人注意到了什么问题吗？

Answer 1

评论更新：

我已经更新了小提琴 here ，以确切拥有您想要的内容。如果您不能在列表项上使用calc，并且因为您的设置宽度为1000px，则可以通过执行以下操作对宽度进行硬编码：width：（1000px - 192px）/ 2，这将是{{ 1}}

原始回答：

如果您总是有4个菜单项，请在每个width: 202px上设置width: 25%（100％/ 4）。这是 updated fiddle

我还将li元素的边距和填充设置为0。

这是你在找什么？

CSS定位导航栏

1 个答案: