Question

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

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

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

/ UPDATE / Collection应从浏览器屏幕的边缘开始，Contact应该在浏览器屏幕的右边缘结束。（因此，利用边距我的意思是浏览器非常有优势......）

你有什么想法吗？

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

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

Answer 2

请参阅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 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

尽管你可以使用一些解决方法，但这里适当的解决方案是使用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，请告诉我这是否是您需要的解决方案。

水平菜单，4个等距元素

4 个答案: