Как сделать 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="https://stackoverflow.com/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="https://stackoverflow.com/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>