這個DIV爲什麼不收縮包裝？

Question

我有一排<div>這將是按鈕。我模仿一些背景的實際行爲。工作很好。問題是外層<div>（行）沒有收縮包裝，因此字段集的邊框也很寬。在這裏看到：http://jsfiddle.net/L99VY/

我也覺得我做了一件奇怪的使用

div.button { 
    display: table-cell; 
    ... 
} 

如果我嘗試別的東西，像display-inline或float:left，這也影響到文本呈現按鈕的方式。與此相關的收縮包裝問題？

如果你在IE11或最新的FF中打開小提琴，你會看到我想怎麼做（背景圖像除外）。

有什麼建議嗎？

Answer 1

將display: inline;添加到fieldset，邊框位於fieldset。你也可以使用inline-block，but IE7 or older不會很好。

jsFiddle

你應該看看this answer on SO一個解釋，爲什麼你fieldset的（塊級元素在這種情況下）的寬度自動擴展到其父容器的寬度。

Answer 2

您可以將「顯示」規則添加到字段集。 例如：

 fieldset { 
      display: inline-block; 
     } 

爲什麼你不使用顯示：錶行和顯示：內聯表？他們會發揮與內嵌塊相同的效果，但會更合適。