首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在div中将元素均匀分布在彼此相邻的位置?

如何在div中将元素均匀分布在彼此相邻的位置?
EN

Stack Overflow用户
提问于 2011-08-30 22:35:58
回答 7查看 121.8K关注 0票数 90

这是为菜单准备的。

例如,我有一个包含3个跨度的div元素,所有这些元素都有一些边距、最大宽度和浮动(左或右)。

它的位置从左侧开始,如下所示:

[[span1][span2][span3] - lots of free space here].

我想让它像这样:

[[span1] - space - [span2] - space - [span3]]

如何使用CSS实现这一点?我怀疑这是不可能的。

请注意,当我添加或删除菜单项时,我希望它保持相同的样式。

HTML:

代码语言:javascript
复制
<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

代码语言:javascript
复制
#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}
EN

回答 7

Stack Overflow用户

发布于 2015-11-12 04:28:21

我们只需要justify-content: space-betweendisplay: flex,但还是要感谢@Pratul给我们的灵感!

票数 10
EN

Stack Overflow用户

发布于 2011-08-30 22:46:05

这是一种简单快捷的方法。

代码语言:javascript
复制
<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

代码语言:javascript
复制
div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

然后根据您拥有的数量调整spanwidth

示例:http://jsfiddle.net/jasongennaro/wvJxD/

票数 8
EN

Stack Overflow用户

发布于 2019-12-08 05:35:44

您只需要将id为#menu的div显示为flex容器,如下所示:

代码语言:javascript
复制
#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7245018

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档