0

我遇到了一些麻烦！我相信一些非常简单的事情。然而它困扰着我。

我正在努力实现：

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>
4

2 回答 2

0

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

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

那么其中的 5 个 li 必须是 ul 的 20%（因此它们具有相同的宽度）

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

这是您修改后的代码

那是你想做的吗？您也可以使用 display:table-cell 技巧来做到这一点。

于 2012-10-13T13:07:45.693 回答
0

删除#list-nav的宽度定义：#list-nav{ /*width: 700px;*/ float: right;}

并添加这个

ul#list-nav li {
    display:inline-block;
}
于 2012-10-13T13:41:46.833 回答