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

Question

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

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

它们之间的字符串应该是等距的。菜单的宽度应该是可伸缩的。 这是迄今为止我最接近的解决方案，它不准确：/

/UPDATE/ 集合应该从浏览器屏幕的边缘开始，而联系人应该在浏览器屏幕的右边缘结束。 （所以边距我的意思是浏览器非常边缘......）

演示：https://jsfiddle.net/t8kn1nch/

你有什么想法吗？

HTML：

            <div id="navigation">
                <div id="collection">collection</div>
                <div id="shopabout">
                    <div id="shop">shop</div>
                    <div id="about">about</div>
                </div>
                <div id="contact">contact</div>
            </div>

CSS：

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

#navigation div{
display: inline-block;
}

#navigation #collection{
float: left;
}

#navigation #shopabout{
width: 100%;
display: inline;

}
#navigation #shop{
width: calc(100%/1.8);
text-align: center;
}
#navigation #about{
display: inline;
}
#navigation #contact{
float: right;
}

Answer 1

查看 jsfiddle 的工作解决方案：

https://jsfiddle.net/45n3d6hs/2/

CSS：

#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;
}

Answer 2

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

#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;
}

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

Answer 3

类似THIS?

* {
  margin: 0 0 0 0;
}
body {
  background-color: black;
}
#navigation {
  width: 100%;
}
#navigation > div {
  display: inline-block;
  width: 25%;
  text-align: center;
  background-color: red;
}
#navigation > div:first-child, #navigation > div:last-child {
  background-color: brown;
}

<div id="navigation">
  <div id="collection">
    collection</div><div id="shop">
    shop</div><div id="about">
    about</div><div id="contact">
    contact</div>
</div>

这里的技巧是使用 HTML，使用display: inline-block 使 div 之间的空间可以像一个元素一样被读取，一个空格键。 div 之间的任何空白都会破坏这种布局，因为每个 div 占用 25% 的宽度！

Answer 4

好的，试试这个 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;
}