0

% を使用して水平方向のナビゲーションを作成しようとしていますが、何が起こっているのかわかりません。希望どおりにすべて設定しましたが、A または LI にサイズを指定しても何も変わらないため、背景画像の銀色しか表示されません。

<div id=mainwrap> 

<div id=header> 

    <div id = title>
    <img src="images/hangaquilt.png" width="483" height="78" alt="Hang A Quilt"> 
    </div>

    <div id = cartstatus>
    <p> Your Cart Is Empty </p>
    </div>

      <div id=nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">View Cart</a></li>
        <li><a href="#">Dealers</a></li>
        </ul>
     </div>

</div> 

<div id=bodycontent>

    <div id=sidebar>
    </div>

    <div id=bodytext>
    </div>

</div>

<div id=slideshow>
</div>

<div id=footer>
</div>






</div>

そしてCSS

body {
background-color: rgb(238,225,185);
}

#mainwrap {

margin: 0 auto;
height: 700px;
width: 75%;
max-width:1024px;
min-width:800px;
}

#header {
margin: 0 auto;
margin-top: 3%;
width: 100%;
height: 25%;
}
#header img{
margin-left: 3.3%;
}
#title {
float:left;
width: 55%;
}
#cartstatus{
float: right;
width: 45%;
}

#cartstatus p{
margin-right: 7.1%;
float: right;
}
#nav{
clear: both;
width: 100%;
height: 33%;
font-family:"Rockwell Extra Bold",Trebuchet MS, Arial, Helvetica, sans-serif;

}
#nav ul {
height: 100%;
list-style-type: none;
text-align: center;
}
#nav li{
padding: 0;
width: 20%;
height: 100%;
font-size:18px;
display:inline;
}
#nav ul li a{
background-image: url(../images/navbg.png);
width: 19%;
height: 98%;
color: black;
text-decoration: none;
}

私は以前にこのようなナビゲーションを行ったことがありますが、この問題は一度もありませんでした。私が見逃しているのは本当に単純なものだとわかっているので、本当にイライラします。

4

1 に答える 1

1

要素を「インライン」として定義すると、幅や高さを変更できません。それ以外の

display:inline;

試す

display:inline-block;

これがあなたが望むものです：http://jsfiddle.net/JmTKb/

于 2013-05-13T03:36:46.727 に答える