mobile responsive css，inline-block

Question

我在頁面樣式上有兩個按鈕，分別是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

，您還可以設置第二一個元件的位置來定位絕對

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

} 

http://jsfiddle.net/7NaDg/