1

我在这里需要一点帮助：）

我有这个布局：http: //jsfiddle.net/eyTYF/

只是一个ul5 li's，里面都有a标签。

我希望所有这些元素都填充 100% 的屏幕宽度，图标保持其大小（50 像素），只有标题区分大小。

我怎样才能做到这一点？

先感谢您 ：）

4

3 回答 3

1

It's easy enough to do this with display: table. http://codepen.io/pageaffairs/pen/lbBKx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

ul {list-style: none; padding-left: 0; width: 100%; display: table;}

li {display: table-cell;}

li:nth-child(1), li:nth-child(2), li:nth-child(4), li:nth-child(5){
    width: 50px;
}

li{line-height: 50px;text-align: center;}

li:nth-child(1){
    background: red;
}

li:nth-child(2){
    background: green;
}

li:nth-child(3){
    background: blue;
}

li:nth-child(4){
    background: green;
}

li:nth-child(5){
    background: red;
}

a{color: white; display: block; width: 100%;vertical-align: middle;line-height: 50px;}

</style>

</head>
<body>

<ul>
    <li><a href="#"><i>Icon 1</i></a></li>
    <li><a href="#"><i>Icon 2</i></a></li>
    <li><a href="#"><span>Title</span></a></li>
    <li><a href="#"><i>Icon 3</i></a></li>
    <li><a href="#"><i>Icon 4</i></a></li>
</ul>

</body>
</html>
于 2013-05-29T14:48:23.200 回答
0

如果您愿意稍微更改标记...

<ul>
    <li><a href="#"><i>Icon 1</i></a></li>
    <li><a href="#"><i>Icon 2</i></a></li>
    <li><a href="#"><i>Icon 3</i></a></li>
    <li><a href="#"><i>Icon 4</i></a></li>
    <li><a href="#"><span>Title</span></a></li>
</ul>

和

ul {list-style: none; padding-left: 0; width: 100%;}
li{height: 50px;text-align: center;}
li:nth-child(1){
    background: red;
    width: 50px;
    float: left;
}
li:nth-child(2){
    background: green;
    width: 50px;
    float: left;
}
li:nth-child(5){
    background: blue;
clear: none

}
li:nth-child(4){
    background: green;
    width: 50px;
    float: right;
}
li:nth-child(3){
    background: red;
    width: 50px;
    float: right;
}
a{color: white; display: block; width: 100%;vertical-align: middle;line-height: 50px;}

小提琴：http: //jsfiddle.net/d3ufR/

于 2013-05-29T14:38:34.203 回答
0

一个解决方案是设置中间<li>的宽度为 100%，然后为每个图标减去 50px。您必须设置z-index将中间 div 放在其他 div 后面。

工作示例！

代码导致：

    li {
        float: left;
        width: 50px;
        height: 50px;
        text-align: center; 
        position:relative;         /*To make z-index work*/
        z-index:1
}

    li:nth-child(3){
        background: blue;
        width:100%;                  
        margin: 0 -100px 0 -100px;   /* Subtract 100px for each side */
        position:relative;           /*To make z-index work*/
        z-index:0
    }
于 2013-05-29T14:42:51.360 回答