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

よくわかりませんが、それがあなたが探しているものだと思います。まず、ナビの大きさは 700px で、画像とコンテナも 900px です。

#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 に答える