我目前的程式码有几个问题：
子导航栏没有从我想要的地方开始。我希望它向左浮动，但它向右浮动，因此没有足够的空间。我希望子导航栏更像http://www.anntaylor.com/sweaters/cata000011的子导航栏
我想将滤镜上移到图像的第一行，而不是最后一行，如其当前位置。
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="Princess.css">
<title> PPRINCESS </title>
</head>
<body>
<div id="wrap">
<div id="title">
<h1> PPRINCESS </h1>
</div>
<ul id="bar">
<li> <a href="home.html" > Home </a> </li>
<li> <a href="collection.html" > Collection </a>
<ul>
<li> <a href="angels.html"> Angel on Meadows </a> </li>
<li> <a href="beach.html"> Beachy Ladies </a> </li>
<li> <a href="streets.html"> Pavements and Streets </a> </li>
<li> <a href="symbol.html"> Become a Symbol </a> </li>
</ul>
</li>
<li> <a href="shoes.html" > Shoes </a> </li>
</ul>
<div id="headshot">
<img src="headshotimg.jpg" alt="Head Shot">
</div>
<ul id="sidebar">
<li> FILTERS </li>
<li> <a href="Cotton Shirts.html" > Cotton Shirts </a> </li>
<li> <a href="Sleeveless.html"> Sleeveless </a> </li>
<li> <a href="Long Sleeve.html"> Long Sleeve </a> </li>
</ul>
<div id="three">
<div id="row1">
<div>
<img src = "img1.jpeg" alt="Image 1">
<text> DOT CHIFFON TIE NECK BLOUSE </text>
<br>
<text> SGD 166.90 </text>
</div>
<div>
<img src = "img2.jpeg" alt="Image 2">
<text> CREPE FLORAL APPLIQUE TOP </text>
<br>
<text> SGD 180 </text>
</div>
<div>
<img src = "img3.jpeg" alt="Image 3">
<text> CREPE FLORAL APPLIQUE TOP </text>
<br>
<text> SGD 180 </text>
</div>
</div>
<div id="row2">
<div>
<img src = "img4.jpeg" alt="Image 4">
<text> CREPE FLORAL APPLIQUE TOP </text>
<br>
<text> SGD 180 </text>
</div>
<div>
<img src = "img5.jpeg" alt="Image 5">
<text> CREPE FLORAL APPLIQUE TOP </text>
<br>
<text> SGD 180 </text>
</div>
<div>
<img src = "img6.jpeg" alt="Image 6">
<text> CHIFFON YOKE BLOUSE </text>
<br>
<text> SGD 180 </text>
</div>
</div>
<div id="row3">
<div>
<img src = "img7.jpeg" alt="Image 7">
<text> COLORBLOCK CHIFFON BLOUSE </text>
<br>
<text> SGD 160 </text>
</div>
<div>
<img src = "img8.jpeg" alt="Image 8">
<text> BRUSHED SQUARE TIE NECK BLOUSE </text>
<br>
<text> SGD 200 </text>
</div>
<div>
<img src = "img9.jpeg" alt="Image 9">
<text> PIPED SILK BLOUSE </text>
<br>
<text> SGD 170 </text>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
body {
background-color: #fefbf7;
}
#wrap {
width: 100&;
background-color: #fefbf7;
margin: auto;
}
#title {
width:20%;
margin: 1em 0em 0em 10%;
padding:20px;
float:left;
display:inline-block;
}
#bar {
background-color: #fefbf7;
float: right;
list-style:none;
padding: 20px;
display:inline-block;
}
#bar li {
float:right;
background-color: #fefbf7;
border-left: #4c4c4c;
}
#bar li a {
display: block;
padding: 20px;
font-weight: bold;
}
#bar li:hover {
background-color:beige;
}
#bar li a,visited {
color: #525252;
text-decoration: none;
}
#bar ul {
display: none;
position: absolute;
}
#bar li:hover > ul{
display:block;
float: left;
}
/*Content: sidebar and main image frame*/
#headshot img{
width: 80%;
margin: 2em 10% 10% 10%;
}
#sidebar {
width: 20%;
align: top;
display: inline-block;
margin: 2em 2em 0em 5%;
}
#three {
width: 60%;
display: inline-block;
}
#three div div{
width: 33%;
display: inline-block;
}
#three div div img {
width: 100%;
}
#three div div img {
width: 100%;
}
最佳答案
Hye I am modified some css code, so Please check once, I think it's useful for you.
#bar li a{}
#bar li ul{width: 100%;
left: 0;
list-style: none; padding-left: 0;}
#bar li ul li{float: left;}
http://jsfiddle.net/btf9prvy/2/
关于html - 继承-子导航栏不会向左 float ，因为其父节点向右 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33052186/