Css 具有4个等距元素的水平菜单

我想创建一个具有4个等距元素的水平菜单。菜单必须始终粘贴在浏览器底部

棘手的部分是，第一个元素字符串必须从左边距开始，最后一个元素字符串必须从右边距结束

它们之间的弦应等距排列。菜单的宽度应该是可伸缩的。 这是到目前为止我最接近的解决方案，但不准确：/

/更新/收集应在浏览器屏幕的边缘开始，联系人应在浏览器屏幕的右边缘结束。（因此，对于边距，我的意思是浏览器非常边缘…）

演示：

你有什么想法吗

HTML:

好的，试试这个CSS

#navigation{
    position: fixed;
    bottom: 0;
    width: 100%;
}

#collection {
    width:25%;
}

#contact {
    width:25%;
}

#shopabout {
    width:50%;
}

#shop,
#about {
    width:50%;
}

#navigation div{
    display: inline-block;
    text-align:center;
    float:left;
}

#navigation #contact {
    text-align:right;
}

#navigation #collection {
    text-align:left;
}

好的，试试这个CSS

#navigation{
    position: fixed;
    bottom: 0;
    width: 100%;
}

#collection {
    width:25%;
}

#contact {
    width:25%;
}

#shopabout {
    width:50%;
}

#shop,
#about {
    width:50%;
}

#navigation div{
    display: inline-block;
    text-align:center;
    float:left;
}

#navigation #contact {
    text-align:right;
}

#navigation #collection {
    text-align:left;
}

---

请参阅JSFIDLE with working solution：

Css:

---

请参阅JSFIDLE with working solution：

Css:

什么样的

*{
保证金：0；
}
身体{
背景色：黑色；
}
#航行{
宽度：100%；
}
#导航>分区{
显示：内联块；
宽度：25%；
文本对齐：居中；
背景色：红色；
}
#导航>分区：第一个孩子，#导航>分区：最后一个孩子{
背景颜色：棕色；
}

收集
商店
关于
接触

类似于

*{
保证金：0；
}
身体{
背景色：黑色；
}
#航行{
宽度：100%；
}
#导航>分区{
显示：内联块；
宽度：25%；
文本对齐：居中；
背景色：红色；
}
#导航>分区：第一个孩子，#导航>分区：最后一个孩子{
背景颜色：棕色；
}

收集
商店
关于
接触

尽管您可以使用一些变通方法，但正确的解决方案是使用

---

这是我的建议，如果您需要解决方案，请告诉我。

尽管您可以使用一些变通方法，但这里的正确解决方案是使用

---

---

这是我的建议，如果您需要解决方案，请告诉我。

它看起来几乎和我想象的一样，但是缺少了棘手的部分！字符串不是从屏幕边缘开始的。抱歉，也许“从边距开始”描述不准确：/，我的意思是它实际上是从浏览器屏幕的边缘开始的。它看起来几乎和我想象的一样，但是缺少了棘手的部分！字符串不是从屏幕边缘开始的。抱歉，也许“从边距开始”描述不准确：/，我的意思是它实际上是从浏览器屏幕的边缘开始的。它看起来几乎和我想象的一样，但是缺少了棘手的部分！字符串不是从屏幕边缘开始的。对不起，也许“从边距开始”描述不准确：/，我的意思是它实际上从浏览器屏幕的边缘开始。这几乎就是我的意思！缺少的部分与HelloWorld代码中的相同，即字符串，因此“Collection”应该从browers屏幕的边缘开始。对不起，我没有在问题中正确描述它！我要更新它。哦，谢谢你的帮助：）div“collection”从身体的最末端开始，而div of contact则从最末端结束！文本刚好居中对齐！我更改了第一个和最后一个div的颜色，以便更清晰地显示#导航div的宽度为100%，每个子div占据25%的屏幕-运行此全屏以进一步澄清。这几乎就是我的意思！缺少的部分与HelloWorld代码中的相同，即字符串，因此“Collection”应该从browers屏幕的边缘开始。对不起，我没有在问题中正确描述它！我要更新它。哦，谢谢你的帮助：）div“collection”从身体的最末端开始，而div of contact则从最末端结束！文本刚好居中对齐！我更改了第一个和最后一个div的颜色，以便更清晰地显示#导航div的宽度为100%，每个子div占据25%的屏幕-运行此全屏以进一步澄清。这几乎就是我的意思！缺少的部分与HelloWorld代码中的相同，即字符串，因此“Collection”应该从browers屏幕的边缘开始。对不起，我没有在问题中正确描述它！我要更新它。哦，谢谢你的帮助：）div“collection”从身体的最末端开始，而div of contact则从最末端结束！文本刚好居中对齐！我更改了第一个和最后一个div的颜色，以便更清晰地显示#导航div的宽度为100%，每个子div占屏幕的25%——运行此全屏以进一步澄清。谢谢，但元素应该在同一行中，彼此相邻（等距）。收集应该从浏览器屏幕的边缘开始，联系人应该在浏览器屏幕的右边缘结束。我在解决方案中包含了这个要求。还是我理解你错了？我不知道，你能不能为你想要完成的事情添加一个图像，因为我真的很困惑？谢谢，但是元素应该在同一行中，彼此相邻（等间距）。收集应该从浏览器屏幕的边缘开始，联系人应该在浏览器屏幕的右边缘结束。我在解决方案中包含了这个要求。还是我理解你错了？我不知道，你能不能为你想要完成的事情添加一个图像，因为我真的很困惑？谢谢，但是元素应该在同一行中，彼此相邻（等间距）。收集应该从浏览器屏幕的边缘开始，联系人应该在浏览器屏幕的右边缘结束。我在解决方案中包含了这个要求。还是我理解你错了？我不知道，你能不能给我一个你想要实现的形象，因为我真的很困惑？嗨，卡多佐！谢谢你的代码。缺少的部分与Aramil Rey和HelloWorld的其他解决方案相同。集合应在浏览器屏幕的边缘开始，联系人应在浏览器屏幕的右边缘结束。您可以将#导航设置为使用超过父级和我们的100%宽度

#navigation{
    position: fixed;
    bottom: 0;
    width: 100%;
}

#collection {
    width:25%;
}

#contact {
    width:25%;
}

#shopabout {
    width:50%;
}

#shop,
#about {
    width:50%;
}

#navigation div{
    display: inline-block;
    text-align:center;
    float:left;
}

#navigation #contact {
    text-align:right;
}

#navigation #collection {
    text-align:left;
}

#navigation {
    position: absolute;
    bottom: 0;
    width: 100%;
}
#navigation #collection, #navigation #contact {
    width: 25%;
    float:left;
}
#navigation #shop, #navigation #about {
    width: 50%;
    float: left;
}
#navigation #shopabout {
    width: 50%;
    float: left;
}

#navigation {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
#collection, #contact {
    width: 25%;
}
#contact {
    text-align: right;
}
#shopabout {
    width: 50%;

    display: flex;
    flex-direction: row;    
}
#shop, #about {
    width: 50%;
    text-align:center;
}