不同div中按钮的垂直间距相等
在前端开发中，可以通过CSS来实现不同div中按钮的垂直间距相等的效果。以下是一种实现方式：
- 首先，给每个按钮所在的div添加一个共同的class，例如"button-container"。
- 使用Flexbox布局来实现垂直居中和等间距的效果。在按钮容器的CSS样式中，添加以下属性：.button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
display: flex;将按钮容器设置为Flexbox布局。flex-direction: column;将按钮容器的子元素垂直排列。align-items: center;将按钮容器的子元素在垂直方向上居中对齐。justify-content: space-between;将按钮容器的子元素在垂直方向上平均分布，实现等间距效果。
这样，不同div中的按钮就会具有相等的垂直间距。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的品牌商，我无法提供相关链接。但是，腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以通过腾讯云官方网站进行了解和查找相关产品。
相关·内容
1回答
如何在HTML中将多个图像放在页面中心？
html、css、center
我想在页面的中心放置4个方框，即它们应该垂直居中并水平放置，一个方框应该在最左边，一个在最右边，左边的应该水平放置在极端的中间。我知道以前有人问过这样的问题，但我不明白解决方案的确切逻辑。有没有人能对此给出一个恰当的解释？非常感谢。这是HTML代码-
.cards div{
height: 200px;
width: 200px;
float: left;
text-align: center;
margin-left: 100px;
}
.card_1{
background-color: green;
}
.card_2{
bac
浏览 0提问于2017-08-12得票数 0
2回答
我有一个标题元素，我想要显示flex列，这样我就可以垂直居中.container分区。这工作得很好。然后我需要.container中的项目在1200px上以均匀的间距排成一行。你不能在flex容器中做flex容器去不同的方向吗？请看下面我的css：
header {
height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding:
浏览 10提问于2020-03-14得票数 2
回答已采纳
3回答
如何在边框中对齐顶部和底部的物品？
html、css、flexbox、sidebar
我基本上想要一个类似于Visual代码中的Sidebar的边栏。上面有按钮，底部也有两个按钮。我做了一个边栏，但我只能定位所有的项目在顶部或底部的边栏，但我要两者。我希望3个项目在顶部和2个项目在底部。
这是我的CSS：
.sidebarleft {
background-color: rgb(25, 20, 26);
display: flex;
flex-direction: column;
flex: 0 0 50px;
}
.sidebarleft-button {
display: flex;
justify-content: center;
align
浏览 4提问于2022-04-16得票数 0
回答已采纳
2回答
调整-内容在按钮上不能正常工作。
html、css、angular、sass、flexbox
我在父容器中嵌套了3个按钮。父容器具有display:inline-flex，但justify-content: space-between属性不能工作。这些按钮定义了一个max-width (因为justify-content只能在有空空间时才能工作)。此时，当我尝试为justify-content (space-between、space-around、center等)设置不同的值时，按钮的分组会被移动，但是单独的按钮永远不会分开。我已经对此进行了一段时间的修改，并阅读了一堆StackOverflow的答案，但到目前为止还没有什么效果。任何帮助都是非常感谢的！，这是我的角度代码的简化版本。
浏览 4提问于2021-12-16得票数 0
回答已采纳
4回答
Flexboxs儿童的父母过多
html、css、flexbox
我见过几个像我这样的问题，但似乎没有一个问题得到成功的回答。我的问题可能很简单，但我不明白我的错误。
--我在彼此之间使用了几个柔性盒。当我改变浏览器的大小时，它应该以同样的方式调整大小。但在某一时刻，孩子们的父母柔韧盒-丑陋的被淹没了。
因为我没有发现我的错误，所以我启动了一个新的HTML文档--我仍然有这个错误。“游戏箱”的孩子们不做我希望他们做的事情。
，这是一把小提琴：
谢谢你的帮助- RoetzerBub
html , body, main {
margin: 0;
padding: 0;
min-height: 100%;
min-width:
浏览 1提问于2016-05-17得票数 3
回答已采纳
4回答
如何将内容垂直中心到肚脐以下？
html、css
我想用屏幕上可用的垂直空间的其余部分垂直地将区段块居中。应该是100 to (肚脐高度)，但我不知道如何在css中实现这一点。
我目前正在设置区段高度:100 to，但这会导致滚动条出现
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
border: 1px solid red
}
section {
display: flex;
flex-direction:
浏览 7提问于2022-09-09得票数 0
2回答
如何实现输入字段:在悬停时，它扩展到其他同级元素(具有相同父元素)上？
例如，我有：
.grandparent{
display: flex;
justify-content: space-between;
width:100%;
height:5rem;
}
.other{
background-color: #7fffd477;
display: flex;
align-items: center;
justify-content: cen
浏览 1提问于2022-06-05得票数 0
回答已采纳
1回答
IE 10/11 FLEX子溢出对齐的解决方法
css、flexbox、internet-explorer-11、internet-explorer-10
如果flex容器有justify- content : center，并且有一个比容器宽的FLEX子容器，则内容在除IE10和IE11之外的所有浏览器中都保持居中(内容在两个方向上的溢出相等)。
在大多数浏览器中，你会得到这样的结果：
在IE 10/11中，你会得到如下结果：
我需要一种方法来在这些IE浏览器中实现居中布局，而不是完全抛弃flexbox方法。如果有必要，我对CSS hack IE的变通方法持开放态度。
下面是示例的一个小插曲：
.wrap {
width: 100%;
height: 100%;
}
.layer {
display: -m
浏览 5提问于2017-02-18得票数 7
回答已采纳
3回答
中间的一个弯曲项目和底部对齐另一个。
html、css、flexbox
我试着让一个弯曲的项目在垂直和水平的中心。
我想把一些文本固定在flex容器的底部。
文本上的margin-top:auto只是将内部框推到顶部。想法？
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: golden
浏览 1提问于2016-09-07得票数 4
回答已采纳
3回答
如何将文本与同一行上的标题链接的侧面对齐？
html、css
我如何将GSS从三个链接的顶部移动到左侧的同一行，两个div之间有很大的空间？
.gssnav {
display: flex;
flex-direction: row;
justify-content: center;
}
.nav-padding {
margin-top: 30px;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 30px;
}
.navlink {
cursor: pointer;
color: #
浏览 3提问于2021-10-27得票数 0
3回答
CSS: Flexbox中的Flexbox
html、css、flexbox
我稍微玩弄了一下flexboxes，想要组合一个列和行容器。我的问题是：
为什么放在列中的行元素不能覆盖flex容器的整个宽度？
示例代码如下所示：
HTML：
/* CSS: */
.flex-container {
color: blue;
background-color:yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content:space-between;
align-items:center;
}
.horizontal {
flex-directi
浏览 0提问于2016-11-29得票数 14
回答已采纳
1回答
flexbox将项目从中心对齐，不使用填充物
css、flexbox
使flex项居中很容易。然而，我喜欢将它向上移动一点，以便上下空间之间的关系是例如1/2。使用填充物时也很容易。但是，有没有一种没有填充物的方法呢？HTML：
<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>
CSS：
#the-item {
width: 80vw;
height: 30vh;
bo
浏览 0提问于2018-04-29得票数 1
1回答
使用flex-direction: column垂直居中不同高度的内容
html、css、flexbox
我正在尝试使用具有不同指定高度的div的flex-direction: column来创建布局。如果您为共享相同flexbox父元素的div指定不同的高度，我发现垂直对齐方式消失了。
我尝试了使用align-items，align-content，justify-content的各种组合，但都没有效果。我用flex-grow代替了高度规则，它也没有效果。我可以让内容垂直居中的唯一方法是使所有项目的相对高度相同。
header {
display: flex;
flex-direction: column;
justify-content: space-around;
al
浏览 25提问于2017-03-13得票数 3
回答已采纳
1回答
以Safari为中心的Flexbox
css、twitter-bootstrap、safari、flexbox
以下代码在Chrome和大多数现代浏览器中将视频垂直和水平居中，但Safari除外，在Safari中视频只是垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
浏览 0提问于2016-07-22得票数 4
回答已采纳
2回答
Flexbox:底部和中间对齐吗？
html、css、flexbox
有人知道如何使用柔性盒创建这个布局吗？
文本将放在中间，按钮将放在文本和底部之间。
我现在有了这个：
.aligner {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
}
<div class="aligner">
<h3>SUPERMAN</h3>
<p>FTW</p>
<button>BUTTON</
浏览 1提问于2015-11-26得票数 7
回答已采纳
3回答
把flex项目变成flex容器是不是一种坏做法？
html、css、flexbox
我有一个像这样的html布局：
<div class="container">
<div class="content">
// content goes here
</div>
</div>
我已经向容器div申请了100vh。我需要将内容垂直居中。我发现如果我将以下CSS应用于容器和内容，我可以将content div中的所有内容垂直居中，但我想知道这是不是一种糟糕的做法，我是否应该做一些其他的事情？
display: flex;
justify-content: center;
align-i
浏览 30提问于2018-08-28得票数 1
回答已采纳
2回答
防止挠性项目从一边呈现到另一边
html、css、flexbox
我使用flexbox在一个块中对一些项目进行居中，但是我希望每个项目都在自己的行中。例如，我希望橙色的方块在文本的上方，但是在使用flex之后，它将它移到文本的一侧--有人知道如何绕过它吗？
.container {
height: 200px;
width: 200px;
background: cornflowerblue;
position: relative;
}
.inner {
height: 100%;
position: absolute;
left: 0;
width: 100%;
top: 0;
display: -webkit
浏览 4提问于2017-03-10得票数 9
回答已采纳
3回答
为什么justify-content空格-什么都不做？
html、css、flexbox
我正在尝试使用justify-content: space-between将top-nav和bot-nav部门垂直分开。然而，它并没有做任何事情。有人能指出我做错了什么吗？
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
html {
font-family: 'Rock Salt', cursive;
}
.flex-container {
display: flex;
}
header {
width: 300px;
height: 100vh;
position: f
浏览 0提问于2015-12-28得票数 3
回答已采纳
2回答
我如何摆脱我肚脐上的空格？
html、css、removing-whitespace
我不知道从用户图标右边的空格(用黄色突出显示)来自哪里。我希望用户按钮只有一个小的空白在它的右边。
如果我试图检查它(见下图)，它说它是ul元素的一部分，但我找不到问题。
我不知道要分享什么片段，因为我不知道问题出在哪里，但下面是ul元素的CSS、整个CSS和ul元素所在的HTML。
HTML：
CSS专门用于ul元素：
nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: cent
浏览 7提问于2020-10-24得票数 0
回答已采纳
3回答
内联-flex元素不对齐。
html、css、flexbox
有人能向我解释一下，为什么2 <div>的位置不在同一高度？或者更好的告诉我，如何改变它？这似乎和里面的列挠曲有关，但我不明白。
<div style="background-color: red;padding: 5px;">
<div style="display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 170px; background-color: green; margin: 10px;"&g
浏览 4提问于2022-03-01得票数 -1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
