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

Question

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

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

它们之间的字符串应该等距。菜单的宽度应该是可缩放的。 到目前为止，这是我最接近的解决方案，但它并不准确:/

/更新/收藏应该从浏览器屏幕的边缘开始，联系人应该在浏览器屏幕的右边缘结束。 (所以边距我的意思是浏览器非常边缘...)

演示: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;
}