时间戳

首页 > 解决方案 > 如何将增加的边距大小添加到一行按钮？

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

问题描述

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

例如：

[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 值将始终与前一个按钮的 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%}

标签： htmlcssbuttonalignmentmargins

解决方案

您正在寻找的是“位置：绝对”（在某些情况下或“位置：固定”）。

您可以将“绝对”属性应用于每个按钮，如下所示，这将使每个按钮的位置都是绝对的（即不基于前一个按钮的位置，如您的示例中所示）。您可以在此处阅读有关绝对定位的更多信息：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），而“固定”将始终相对于视口定位。

希望这可以帮助！

推荐阅读