将两个锚放置在彼此相邻的位置，使用inline-block，不要浮动

Question

我想让两个按钮相邻浮动

这一切都工作得很好，直到我添加一个宽度的按钮。这个按钮现在跳下来，不再与另一个按钮在同一行。

按钮居中，不能浮动。

关于如何让这些按钮彼此相邻，不涉及浮动的想法?

.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;
    }
    
        .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;
    }

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

Answer 1

这是使用white-space属性的一种方法。

如果这是你的HTML修改你的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;
    }

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

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

然而，当你减小窗口宽度时，你最终会触发溢出条件，生成一个水平滚动条，所以你需要决定如何处理(最小宽度值?)

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

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

参见演示:http://jsfiddle.net/audetwebdesign/g6LWc/

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