如何将增加的边距大小添加到一行按钮？

Question

我正在尝试创建一行按钮，这些按钮的左边距大小不断增加。

例如：

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

设'-'为空格。我无法弄清楚在 Whosebug 上具有连续空格的格式...如您所见，b1 将具有 margin-left of 10%、b2 20%、b3 40% 和 b4 80%。

但是，看起来左边距正在累积，因此 b2 将总共有 margin-left of 30% 和 b3 a total of 70% 等等...

我的 objective 是将每个按钮放置在距屏幕最左侧一定距离的位置。我试图通过使用 margin-left 来实现这一点。但是，由于按钮在同一个 div 中，我相信这会使 margin-left 值累加，因此下一个按钮的 margin-left 值将始终与前一个按钮的 margin-left 值累加。

这只是我对正在发生的事情的猜想，但代码并没有按照我的想法行事：每个按钮都应该离左边有一定的距离。例如从左边开始 b1 should be 10%。 b2 should be 20% 从左边开始。本质上，我希望所有按钮从一开始就以 margin-left 开头。

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

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

Answer 1

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

Answer 2

您要查找的是 "position: absolute"（或在某些情况下为 "position: fixed"）。

您可以将 "absolute" 属性应用到每个按钮，如下所示，这将使每个按钮的位置都是绝对的（即不基于前一个按钮的位置，就像在您的例子）。您可以在此处阅读有关绝对定位的更多信息：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>

请注意：您也可以将上述示例中的"absolute"替换为"fixed"，以获得相同的效果。 "absolute" 属性会将其定位到最近的定位祖先（即如果您要重新定位 outer/inner div），而 "Fixed" 将始终相对于视图定位港口.

希望对您有所帮助！

如何将增加的边距大小添加到一行按钮？

How to add increasing margin sizes to a row of buttons?

html

css

margins

button

alignment