Question

我遇到了一些麻烦！我相信一些非常简单的东西。但它令我不安。

我正在努力实现：

1）导航栏是其上方主图像的宽度。

如果有人能为我解决这个问题，我会非常感激，这将是一个巨大的帮助。我对编码很新，这对我来说很难。

我已经完成了寻找答案的公平份额但到目前为止已经失败了。

这是页面http://i46.tinypic.com/w9a80i.jpg的图片，请原谅覆盖图片的白盒子，这些图片很容易隐私等。

的CSS：

/* Reset */

html, body {
    padding:0;
    margin:0;
    }

a {
text-decoration: none;
}

ul, li {
    list-style-type: none;
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
}
*
{
   margin:  0;
   padding: 0;
}

body {background-color:#F1F1F1; }

#outer { width: 900px; margin:auto;}

#wrapper { width: 900px; margin:0; background-color: #666; }

#list-nav { width: 700px; float: right;}

ul#list-nav li a {
 text-decoration:none;
 padding:5px 0;
 width: auto;
 background:#999;
 color:#eee;
 float: left;
}

ul#list-nav li a {
  text-align:center;
  border-left:1px solid #fff;
  width: 100px;
}

ul#list-nav li a:hover {
  background:#CCC;
  color:#ffff;
}

#content-fullwidth { width:100%; }

HTML：

<!DOCTYPE HTML>

<html>

<head> 
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="outer">

<div id="wrapper">
  <a href="main.html"><img src="css/Images/banner top.jpg"  /></a>

<div id="navbar">

  <ul id="list-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>  

</div>
  </div>
</div>
</div>

Answer 1

我不确定我理解得很好，但我认为这就是你要找的东西。首先，你的导航是700px大，你的图像和容器也是900px。

使#list-nav : width:100%与容器和图像一样大

然后，其中5个的li必须是ul的20％（因此它们具有相同的宽度）

#list-nav li{display:inline-block;width:20%;float:left}

Here's your code with modification

那是你想做的吗？您也可以使用display：table-cell技巧。

Answer 2

删除＃list-nav：#list-nav{ /*width: 700px;*/ float: right;}

的宽度定义

并添加此

ul#list-nav li {
    display:inline-block;
}

CSS和HTML Navbar流畅/刷新/反对主标题图像

2 个答案: