Wie mache ich ein DIV nur nehmen horizontalen Platz seine Elemente aufnehmen?

Question

Idealerweise möchte ich, dass dies für Mac Chrome und Firefox funktioniert. Wie gestalte ich ein DIV so, dass es den horizontalen Raum gleich der Breite seiner Elemente beansprucht, aber nicht mehr? Im Moment habe ich

<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> 

und die Stile sind

#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; 
} 

Das im JSFiddle hier dargestellt ist - https://jsfiddle.net/jzz6y71t/1/. Beachten Sie, dass das DIV den gesamten horizontalen Raum des übergeordneten Containers belegt, aber ich möchte, dass es nur so lang ist, wie die Breite der Elemente ist.

Answer 1

Sie können Ihren HTML-Code etwas vereinfachen, wie unten gezeigt.

Verwenden Sie auf dem übergeordneten Container display: table, und Sie erhalten ein Blockelement mit einer Schrumpfbreite (width: auto).

Sie können ein anderes Tag für die Kachel verwenden, z. B. 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>