Question

我目前的代码存在一些问题：

子导航栏无法从我想要的位置开始。我希望它向左浮动，但它是向右浮动，因此没有足够的空间。我希望子导航栏更像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%;
}

Answer 1

#bar { 
    background-color: #fefbf7;
    float: right;
    list-style:none; 
    padding: 20px;  

}

#bar li {
    display:inline-block;
    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;


   left:50px;
}
#bar ul li a {
    display:inline-block;

}



#bar li:hover > ul{
    display:block;

}

我认为您需要在代码中进行这些更改才能解决第一个问题。但我不明白你的第二个问题。我解决了你的第一个问题。请查看此链接。 http://jsfiddle.net/souraj/hwmz5rmd/

Answer 2

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/

继承 - 子导航栏不会向左浮动，因为它的父项向右浮动

2 个答案: