gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:30:37 27 4
gpt4 key购买 nike

我想创建一个包含 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;
}

最佳答案

请参阅带有工作解决方案的 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;
}

关于css - 具有 4 个等距元素的水平菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30656077/

27 4 0