如何使DIV僅占用其元素占用的水平空間？

Question

理想情況下，我希望這適用於Mac Chrome和Firefox。 如何設置DIV的樣式，使其占據的水平空間等於其元素的寬度但不是更多？ 現在我有

<div id="searchContainer">
Enter Search Criteria To Lookup Results:<br>
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">

<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item" size="50">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form></div>
</div>

而風格是

#searchContainer
{
        padding: 10px;
        font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
        background-color: tan;
}

#search_form
{
    display:table-cell;
    padding: 0px;
}

#search_form form input
{
    vertical-align:middle;
}

這在JSFiddle中有說明 - https://jsfiddle.net/jzz6y71t/1/ 。 請注意，DIV占用了父容器的整個水平空間，但我希望它只與元素的寬度一樣長。

Answer 1

您可以在某種程度上簡化HTML，如下所示。

在父容器上，使用display: table ，這將為您提供一個具有縮小到適合寬度（ width: auto ）的塊元素。

您可以為圖塊使用其他標記，例如h1 。

 #searchContainer { padding: 10px; font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; background-color: tan; display: table; } #searchContainer h1 { margin: 5px 0; font-size: 1.0em; } #search_form { display: table-cell; padding: 0px; } #search_form form input { vertical-align: middle; } 

 <div id="searchContainer"> <h1>Enter Search Criteria To Lookup Results:</h1> <form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓"> <input type="text" name="first_name" id="first_name" placeholder="First Name"> <input type="text" name="last_name" id="last_name" placeholder="Last Name"> <input type="text" name="item" id="item" placeholder="Item" size="50"> <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"> </form> </div>