Question

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

例如：

[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中，所以我相信这会使左空白边距值累积起来，因此下一个按钮的左空白边距值将始终与前一个按钮的左空白边距值一起累加。

那只是我对正在发生的事情的猜测，但是代码并没有按照我的想法进行：每个按钮应与左侧保持一定距离。例如，左侧的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%}

Answer 1

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

您可以将“ absolute”属性应用于每个按钮，如下所示，这将使每个按钮的位置都是绝对的（即，例如，不基于上一个按钮的位置）。您可以在此处阅读有关绝对定位的更多信息：https://www.w3schools.com/css/css_positioning.asp

正如您所提到的，此示例中的代码略有不足，因此我要指出的是，您的div上缺少结束标记，关闭按钮标记不正确，并且CSS语法已关闭。

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

SELECT TOP 100 d.user_id, d.count
FROM data d
WHERE create_time = (SELECT MAX(create_time)
                     FROM data d1
                     WHERE d1.user_id = d.user_id)
ORDER BY d.count DESC

.buttons button {position: absolute}
.b1 { margin-left: 10%}
.b2 { margin-left: 20%}
.b3 { margin-left: 40%}
.b4 { margin-left: 80%}

请注意：在上述示例中，您也可以将“绝对”替换为“固定”，以达到相同的效果。 “绝对”属性会将其定位到最接近的祖先（即，如果您要重新定位外部/内部div），而“固定”属性将始终相对于视口放置。

希望这会有所帮助！

Answer 2

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

如何为一行按钮增加边距大小？

2 个答案: