Question

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

<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

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

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

}

http://jsfiddle.net/7NaDg/

移动响应css，内联块

3 个答案: