Html 响应性设计：将一个标题放在一个li中，与另外两个li'；两边都有

我需要一点帮助：）

我有这样的布局：

只有一个

ul

和5个

li的

，里面都有

a

标签

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

我该怎么做

---

提前感谢：）

如果您愿意稍微更改标记

<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>

---

Fiddle:

如果您愿意稍微更改标记

<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>

---

Fiddle:

解决方案是将中间的

设置为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
    }

---

解决方法是将中间的

宽度设置为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
    }

---

使用

display:table

很容易做到这一点

ul{列表样式：无；左侧填充：0；宽度：100%；显示：表格；}
li{显示：表格单元格；}
李：第n个孩子（1），李：第n个孩子（2），李：第n个孩子（4），李：第n个孩子（5）{
宽度：50px；
}
li{行高：50px；文本对齐：居中；}
李：第n个孩子（1）{
背景：红色；
}
李：第n个孩子（2）{
背景：绿色；
}
李：第n个孩子（3）{
背景：蓝色；
}
李：第n个孩子（4）{
背景：绿色；
}
李：第n个孩子（5）{
背景：红色；
}
a{颜色：白色；显示：块；宽度：100%；垂直对齐：中间；线条高度：50px；}

使用

显示：表格

很容易做到这一点

ul{列表样式：无；左侧填充：0；宽度：100%；显示：表格；}
li{显示：表格单元格；}
李：第n个孩子（1），李：第n个孩子（2），李：第n个孩子（4），李：第n个孩子（5）{
宽度：50px；
}
li{行高：50px；文本对齐：居中；}
李：第n个孩子（1）{
背景：红色；
}
李：第n个孩子（2）{
背景：绿色；
}
李：第n个孩子（3）{
背景：蓝色；
}
李：第n个孩子（4）{
背景：绿色；
}
李：第n个孩子（5）{
背景：红色；
}
a{颜色：白色；显示：块；宽度：100%；垂直对齐：中间；线条高度：50px；}

谢谢。您的解决方案非常简单明了。谢谢。你的解决方案非常简单明了。