Question

我正在制作一个添加到购物车按钮，我正在制作。

目前，我硬编码固定的保证金空间：

margin: 10px 20px;

来自文字Lab和+ ADD ME!

正如你所看到的，它可以工作，但是当我有不同数量的字母的类时，对齐就会搞砸了。

所以我研究了一个Linux风格/ C风格的标签分隔符字符串，它可以让我表示一个固定的分隔符长度，所以我的所有元素都会使用left-padding: 5em垂直对齐。

然而，这不起作用。

有人能告诉我如何将所有添加内容添加到购物车按钮中吗？

HTML示例：

                <div
                    class="margin-class-type"
                >
                    <h4>
                        <div class="title-container">{{ $type }}
                            <a
                                href="javascript:void(0)"
                                class="btn btn-material-yellow-600 btn-xs btn-raised cart-button mdi-content-add-circle-outline">
                                Add Me!
                            </a>
                        </div>
                    </h4>
                    <table
                        class="table table-striped"
                    >
                        <th>Class</th>
                        <th>Section</th>
                        <th>CRN</th>
                        <th>Day</th>
                        <th>Time</th>
                        <th>Professor</th>
                        <th>Enroll</th>
                        <th>Max Enroll</th>
                        <th>Credits</th>

Answer 1

您可以为实验室添加div并添加我和“按钮”浮动：右侧

或

你可能会创建一个div 并且在那2个内部div中。左内部div应具有特定长度（您期望标签的最大长度，例如lab）在这种情况下，所有内部div都是浮动的

或任何其他方式基本上你需要修复位置。

由于

萨姆

Answer 2

将标题和按钮放在内联元素中，并为它们提供足够大的固定宽度以容纳。没有代码或任何例子的例子，但你似乎不需要一个希望它能解决你的问题。

Answer 3

根据代码的结构，有几种方法可以实现此目的。

1）如果你的标题不是动态的（你知道它们将永远是“Lab”和“Lecture”）你可以在title元素的容器上设置一个宽度，该宽度等于你最宽标题的宽度额外。然后，将“添加到购物车”按钮放在容器中，并保持标题并将其置于绝对位置，以便始终垂直排列。

示例：

<div class="title-container"><h2>Lab</h2><a href="#" class="cart-button">Add Me</a></div>
<!--  YOUR TABLE -->
<div class="title-container"><h2>Lecture</h2><a href="#" class="cart-button">Add Me</a></div>
 <!-- YOUR TABLE -->
<style>
  div.title-container{width:300px;position:relative;}
  a.cart-button{display:block;position:absolute;top:0;right:0;}
</style>

2）如果标题是动态的，你可以使用一些Javascript循环遍历每个并获取最宽的元素，将其设置为所有其他元素的固定宽度。这是一个更多的参与，根据你的问题，我猜这将是矫枉过正。

祝你好运！

垂直对齐按钮

3 个答案: