html - 移动响应式 CSS，内联块

Question

我在页面样式上有 2 个按钮inline-block，但是当缩小窗口大小时，这两个按钮变成一个在顶部，一个在底部。我想要的是把 2 个按钮一起变小，不想有两个分开的按钮。这是我的代码。

<div class="box">
   <a href="#" class="button1">button1</a>
   <a href="#" class="button2">button2</a>       
</div>

    a{
        display:inline-block;
        text-indent:-999px;
        padding:1em 3em;
        background:red;
    }

    .button2{
        background:blue;
    }

在线示例 http://jsfiddle.net/7NaDg/

当窗口变小时，如何使这两个按钮始终变小？谢谢！

Answer 1

您可以设置 div.box 的最大宽度，然后将按钮宽度设置为 50%。

.box {
    max-width:12em;
}

a{
    display:inline-block;
    text-indent:-999px;
    width:50%;
    padding:1em 0;
    background:red;
}

.button2{
    background:blue;
}

http://jsfiddle.net/5yvdM/4/

Answer 2

为避免包装这些按钮：

div.box { white-space:nowrap; }

为了使它们始终适合：

a { max-width:50%; box-sizing:border-box; }

这是小提琴：http: //jsfiddle.net/7NaDg/2/

Answer 3

您还可以将第二个 a 元素的位置设置为绝对位置

.button2{
    background:blue; 
    position: absolute;
    margin-left:5px;

}

http://jsfiddle.net/7NaDg/