Question

我有两个按钮，我想在彼此旁边浮动。

这一切都完美无缺，直到我为其中一个按钮添加宽度。按钮现在跳了下来，不再是另一个按钮在同一行。

按钮居中，因此无法浮动。

关于如何在不涉及浮动的情况下将这些按钮放在彼此旁边的任何想法？

<a href="" class="more_information button">
    abc
</a>

<a href="" class="order_now button">
    def
</a>

按钮css

.button {
    display: inline-block;
    height: 60px;
    padding: 0 15px 0 30px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    text-align: left;
    font-weight: 400;
    color: #FFF;
    font-size: 1.2em;
    line-height: 60px;
}

单独使用这些特定按钮的CSS

.home_topbar .more_information, .home_topbar .order_now {
    margin: 80px 0 0;
}
.home_topbar .more_information {
    margin-right: 15px;
    width: auto;
}
.home_topbar .order_now {
    margin-left: 15px;
    width: 400px;
}

Answer 1

以下是使用white-space属性执行此操作的一种方法。

如果这是 HTML ：

<div class="home_topbar">
<a href="" class="more_information button">abc</a>
<a href="" class="order_now button">def</a>
</div>

修改 CSS ，如下所示：

.button {
    display: inline-block;
    height: 60px;
    padding: 0 15px 0 30px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    text-align: left;
    font-weight: 400;
    color: #FFF;
    font-size: 1.2em;
    line-height: 60px;
}
.home_topbar {
    border: 1px dashed blue;
    white-space: nowrap;
    text-align: center; /* to center buttons */
    min-width: 550px; /* One way of dealing with overflow... */
}
.home_topbar .more_information, .home_topbar .order_now {
    margin: 80px 0 0;
}
.home_topbar .more_information {
    margin-right: 15px;
    width: auto;
}
.home_topbar .order_now {
    margin-left: 15px;
    width: 400px;
}

在父容器.home_topbar上添加white-space: nowrap，这样可以防止两个内联元素在窗口宽度减小时换行到第二行。

但是，当您减小窗口宽度时，最终会触发溢出条件，生成水平滚动条，因此您需要决定如何处理（最小宽度值？）。

请注意，如果您指定min-width值，则可能不需要nowrap值。

如果你想要一个响应更快的设计，我会使用CSS表格单元格。

请参阅演示：http://jsfiddle.net/audetwebdesign/g6LWc/

参考：http://www.w3.org/TR/css3-text/#white-space-property

使用内联块将两个锚定位在彼此旁边而不浮动

1 个答案: