如何确保按钮保持在单独的线上？

Question

我目前正在设计一个有多个选择框的网站。我的布局看起来像这样：

当我缩短文本字符串时，我的按钮最终会在同一行上。无论字符串长度如何，我都想将每个按钮保持在一个单独的行上。这是我用来创建按钮的代码：

$a = 1, 2
$a += 3, 4  # add elements 3 and 4 to array 1, 2 to form array 1, 2, 3, 4

+=

感谢。

Answer 1

我建议一些事情。

• 从div元素中删除align属性。样式（例如水平对齐）不应直接写入HTML元素，而应使用样式表推断。而是为这些div元素提供一个描述性类，例如“buttonBlock”，然后将以下内容添加到CSS定义中：div.buttonBlock {text-align: center}

• 从CSS中删除按钮元素的display: table-cell属性。表格式具有非常特定的目的（表格数据结构），不应用于一般布局。删除display属性会使您的按钮元素默认为display: block，这会将每个按钮元素放在自己的行中，从而解决您的问题。

• 从按钮元素中删除class="button"属性。您可以简单地通过元素名称指示CSS定位按钮元素，因此不需要使用重复相同名称的class复制它。相反，如果您只想定位特定按钮，请使用CSS选择器仅定位在具有类“buttonBlock”的div中找到的按钮，如下面的示例CSS中所示。
• 如果您需要使用JavaScript定位它们（​​添加事件处理程序，动态修改标签等），请为每个按钮添加唯一 id属性。
• 您可能需要/需要为每个按钮添加type和/或value属性，以告知Web浏览器应该是什么行为，以及如果它属于表单。有关您可以在按钮元素中指定的内容的完整详细信息，请参阅HTML5 Button element specification。

组合你最终应该看起来像这样的CSS：

div.buttonBlock {text-align: center}
div.buttonBlock button {
        background-color: #722F37;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 24px;
        margin: 4px 2px;
        cursor: pointer;
        vertical-align: middle;}

和HTML看起来像这样：

<div class="buttonBlock">
    <button id="buttonOptionA">Option A</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionB">Option B</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionC">Option C</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionD">Option D</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionE">Option E</button>
</div>

我刚将它加载到浏览器中，它确实将每个按钮放在自己的行上。

Answer 2

使用div标签

<div><button class="button">Option A will go here. Option A will go here.</button></div>

无需其他格式化。