Question

我设计了一个搜索页面，将流行的“流派搜索”浮动到顶部，但是我不能让这些流派在中心浮动，同时又坐在一起......

http://jsfiddle.net/leeleebefrank/59uYM/

HTML

<div class="Container1">
    <div class="search">
         <h1>Discover</h1> 
        <ul>
             <h3>Search</h3>

            <li class="genre"><a href="#">Genre</a>

            </li>
            <hr class="hr">
            <li class="top"><a href "#">Pop</a>

            </li>
            <li class="top"><a href="#">Electronic</a>

            </li>
            <li class="bottom"><a href="#">Indie Rock</a>

            </li>
            <li class="bottom"><a href="#">Hip Hop</a>

            </li>
        </ul>
    </div>
</div>

CSS

.Container1 {
    background-image:url(../img/bcg_slide-1.jpg);
    background-size: 1920px auto;
    background-repeat:no-repeat;
    background-position:center center;
    width: 100%;
    height:auto;
}
.search {
    background-color:#c44367;
    opacity: 0.6;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: 0 auto 0 auto;
}
.search h3 {
    text-align:center;
    max-width:25%;
    margin: 0 auto 0 auto;
    color:#FFF;
    border-bottom:none;
}
.search ul li {
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    padding-bottom: 1%;
    padding-top: 1%;
    margin: 0 auto 0 auto;
}
.search ul li a {
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    text-decoration:none;
    margin:0 auto 0 auto;
}
.hr {
    color:#F5BDE2;
    opacity:0.5;
    width:15%;
}
.genre {
    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;
    border:none;
    padding: 1% 10%;
    margin:0 auto 0 auto;
    border-radius:25px;
    width:15%;
}
.genre:hover {
    border:none;
}
.top {
    display:inline-block;
    margin:0.5%;
    border:solid 1px #F5F5F5;
    width: 50%;
    margin:0.5% 15% 0.5% 15%;
}
.bottom {
    display: inline-block;
    border:solid 1px #F5F5F5;
    width: 25%;
    margin:0.5% 15% 0.5% 15%;
}
.top:hover, .bottom:hover {
    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;
    border:solid 1px #F5BDE2;
}

以下是原始设计

http://i.stack.imgur.com/oyRXs.png

Answer 1

您并不完全清楚自己要做什么，但如果您尝试将一个类型的项目对齐并将该行放在中心位置，请看一下：< / p>

http://jsfiddle.net/59uYM/3/

此处最简单的部分是text-align: center;应用于父div，强制ul水平居中。

如果这不是您之后的具体内容吗？

Answer 2

Check this fiddle:

HTML：

<div class="Container1">

    <div class="search">

            <h1>Discover</h1>               

                <ul>
                <h3>Search</h3>
                    <li class="genre"><a href="#">Genre</a></li>
                    <hr class="hr">
                    <li class="top1"><a href"#">Pop</a></li>
                    <li class="top2"><a href="#">Electronic</a></li>
                    <li class="bottom">
                        <a href="#" class="bottom1">Indie Rock</a>
                         <a href="#" class="bottom2">Hip Hop</a>
                        <div class="clearfix"></div>
                    </li>




                </ul>

</div>
</div>

CSS：

.clearfix { clear: both;}

.Container1 {
    background-image:url(../img/bcg_slide-1.jpg);
    background-size: 1920px auto;
    background-repeat:no-repeat;
    background-position:center center;
    width: 100%;
    height:auto;
    }


.search {
    background-color:#c44367;
    opacity: 0.6;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: 0 auto 0 auto;
}

.search h3 {
    text-align:center;
    max-width:25%;
    margin: 0 auto 0 auto;
    color:#FFF;
    border-bottom:none;
}

.search ul { text-align: center;}


.search ul li {   
    display: block;
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    margin: 1% auto;


}

.search ul li a{
    display: inline-block;
    width: 100%;
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    text-decoration:none;   
    padding: 1%;    

}

.top1, .top2, .bottom a {
    border:solid 1px #F5F5F5;
}

.hr {
    color:#F5BDE2;
    opacity:0.5;
    width:15%;
}

.genre{

    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;
    border:none;
    padding: 1% 10%;
    margin:0 auto 0 auto;
    border-radius:25px;
    width:15%;
}

.genre:hover {
    border:none;
}

.bottom {
    width:50%;
}

.search ul li a.bottom1 {       
    width: 30%; 
    float: left; 
    }

.search ul li a.bottom2 {       
    width: 60%;
    float: right;
    }

.top1 {
    width: 30%;
}

.top2 {
    width: 50%;
}

li a:hover {
    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;  
}

根据受欢迎程度浮动的边框宽度不同的搜索列表

2 个答案: