Html 如何向一行按钮添加越来越大的边距？

我正在尝试创建一行按钮，这些按钮的左边距越来越大

例如：

[b1]--[b2]-----[b3]-------[b4]

将

'-'

设为空白。我无法确定stackoverflow上有连续空格的格式。。。如您所见，b1的

余量为10%

，

b2 20%

，

b3 40%

和

b4 80%

然而，看起来剩余保证金正在累积，这样b2的剩余保证金总额将达到30%，

b3的剩余保证金总额将达到70%

，依此类推

我的目标是将每个按钮放置在离屏幕最左侧一定距离的位置。我试图通过使用左边距来实现这一点。但是，由于按钮位于同一个div中，我认为这会使左边距值累积，因此下一个按钮的左边距值将始终与上一个按钮的左边距值累积

---

这只是我对正在发生的事情的猜测，但代码并没有达到我的预期：每个按钮都应该离左边有一定的距离。例如，

b1应该是左侧的10%

<代码>b2应为左侧的20%。基本上，我希望所有的按钮从一开始就开始左边距

这是代码。请原谅我在这里输入的伪代码，因为我在另一台没有源代码的机器上

html:

---

首先，您的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%;
 }

外{
宽度：100%；
}
内在的{
宽度：100%；
}
钮扣{
宽度：100%；
}
.一{
宽度：10%；
}
.二{
宽度：20%；
}
.三{
宽度：40%；
}
.4{
宽度：80%；
}

您要查找的是“位置：绝对”（在某些情况下是“位置：固定”）

您可以将“absolute”（绝对）属性应用于每个按钮，如下所示，这将使每个按钮的位置成为绝对位置（即，不基于上一个按钮的位置，如您的示例所示）。您可以在此处阅读有关绝对定位的更多信息：

正如您所提到的，在这个示例中，您的代码有点不正确，因此我将指出您的div上缺少结束标记，结束按钮标记不正确，CSS语法不正确

下面的代码应该可以解决您的问题：

.buttons按钮{位置：绝对}
.b1{左边距：10%}
.b2{左边距：20%}
.b3{左边距：40%}
.b4{左边距：80%}

b1
b2
b3
b4

Oscar，对不起。我应该校对我的帖子。请参阅更新的代码。内部div将按钮div包裹起来。我的目标是使每个按钮与屏幕最左侧保持一定距离。我试图通过使用左边距来实现这一点。但是，由于按钮位于同一个div中，我相信这会使左边距值累加，因此下一个按钮的左边距值将始终与上一个按钮的左边距值累加。这只是我对正在发生的事情的猜测，但代码并没有实现我所想的：每个按钮都应该离左边有一定的距离。例如，b1应为左侧的10%。b2应为左侧的20%。

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%}

<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%;
 }