如何将增加的边距大小添加到一行按钮？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将增加的边距大小添加到一行按钮？相关的知识，希望对你有一定的参考价值。
我正在尝试创建一排按钮左侧大小增加的按钮。
例如：
[b1]--[b2]-----[b3]-------[b4]
让'-'成为空白。我无法弄清楚格式在stackoverflow上有连续的空格......正如你所看到的，b1将有一个margin-left of 10%，b2 20%，b3 40%和b4 80%。
然而，看起来边缘左边积累使得b2将具有总margin-left of 30%和b3 a total of 70%等等......
我的目标是让每个按钮位于离屏幕最左侧一定距离的位置。我试图通过使用margin-left来实现这一点。但是，由于按钮位于同一个div中，我相信会使剩余边距值累积，因此下一个按钮的margin-left值将始终与前一个按钮的margin-left值一起累积。
这只是我对正在发生的事情的猜想，但是代码没有按照我的想法做到：每个按钮应该离左边一定距离。例如左边的b1 should be 10%。 b2 should be 20%从左边开始。基本上，我希望所有按钮从一开始就开始保留边距。
所以这是代码。请原谅任何伪代码因为我在这里打字，因为我在另一台没有源代码的机器上。
html：
<div class='outer'>
<div class='inner'>
<div class='buttons'>
<button>b1<button/>
<button>b2<button/>
<button>b3<button/>
<button>b4<button/>
</div>
</div>
</div>
CSS：
outer { width: 100% }
inner { width: 100% }
buttons { width: 100% }
b1 { margin-left: 10%}
b2 { margin-left: 20%}
b3 { margin-left: 40%}
b4 { margin-left: 80%}
你要找的是“位置：绝对”（或者在某些情况下“位置：固定”）。
您可以将“绝对”属性应用于每个按钮，如下所示，这将使每个按钮位于绝对位置（即不基于前一个按钮的位置，如您的示例所示）。你可以在这里阅读更多关于绝对定位的信息：https://www.w3schools.com/css/css_positioning.asp
正如你所提到的，在这个例子中你的代码有点偏，所以我会指出你缺少div上的结束标记，你的结束按钮标记是不正确的，你的CSS语法是关闭的。
以下代码应解决您的问题：
.buttons button {position: absolute}
.b1 { margin-left: 10%}
.b2 { margin-left: 20%}
.b3 { margin-left: 40%}
.b4 { margin-left: 80%}<div class='buttons'>
<button class='b1'>b1</button>
<button class='b2'>b2</button>
<button class='b3'>b3</button>
<button class='b4'>b4</button>
</div>开始时你的div没有正确关闭，下面是你的代码与关闭div的一个例子，也尝试更好地组织你的代码让其他人阅读，不知道这是否回答了你的问题，因为我无法真正得到问题关于你想要完成的事情。
<div class='outer'>
<div class='inner'>
</div>
<div class='buttons'>
</div>
</div>
outer {
width: 100%;
}
inner {
width: 100%;
}
buttons {
width: 100%;
}
.one {
width: 10%;
}
.two {
width: 20%;
}
.three {
width: 40%;
}
.four {
width: 80%;
}
以上是关于如何将增加的边距大小添加到一行按钮？的主要内容，如果未能解决你的问题，请参考以下文章
增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小