將div的長度限制爲其內容

我正在嘗試爲Aircraft資源構建數據網格。該頁面有一個標題，一個創建新記錄的鏈接和表格。我有以下HTML：將div的長度限制爲其內容

<div id=body> 
    <h2 class="left">Aircraft</h2> 
    <%= link_to 'New...', new_aircraft_path, :class => 'button right' %> 
    <div style="clear: both;"></div> 
    <table> 
     (omitted for brevity) 
    </table> 
</div>

和下面的CSS：

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

.button { 
    (omitted for brevity) 
}

表大約延伸到我的屏幕上使用約25％。然而，New...按鈕向右浮動，延伸到屏幕的最右側（100％）。我只需要擴展到大約25％的表格。我如何限制div的寬度只能擴展到表格？

This picture illustrates the problem

來源

2011-12-18 Laurens

您可以將表格的寬度定義爲一個設定的數字，然後將該按鈕換成寬度相同的div。 http://jsfiddle.net/j5GRH/

如果表格的寬度是靈活的，你可以添加按鈕在表內：http://jsfiddle.net/j5GRH/3/

來源

2011-12-18 10:38:31 Richard

表格的寬度確實很靈活，所以我最終添加了表格中的按鈕，完成這項工作，謝謝！ – Laurens 2011-12-18 11:08:04

浮動股利左側。它的寬度現在會縮小以適應內容（即表格的寬度）。應用所需的額外清除工作，以保持頁面佈局的其餘部分正常工作。

來源

2011-12-18 10:31:41

感謝您的迅速回復！我試着將按鈕向左移動，但這樣它不會與桌子最右側對齊（如圖所示）。表的大小可能會有所不同。有什麼辦法來解決這個問題嗎？ – Laurens 2011-12-18 10:37:16

將div的長度限制爲其內容

回答

相關問題