Comment faire en sorte que mon DIV prenne seulement la largeur des éléments qu'il contient?

Question

J'ai une petite forme qui est dans une plus grande div:

<div id="confirmEmailContainer"> 
    <form class="edit_user" id="edit_user_2" action="https://stackoverflow.com/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="hWjOQEpKyMKVrk9+vWEeenl3D49rVe4hXFKgF4lza09xXRo0HENKMqGRpq9xUflWqbGJUdoxrmQrsksQWV5s7g==" /> 

    <div class="field"> 
     <label for="user_email">Email</label> <span class="required">*</span> <br> 
     <div> 
     <input size="30" style="display: inline;" type="text" value="myemail@msn.com" name="user[email]" id="user_email" /> 
     <span id="emailConfirmedStatus"> 
      <div class="unconfirmed" style="display: block"><img style="vertical-align:middle" src="/assets/x-mark-621493006f6052df98aa84352a33f21bccabfc670129ca9572009545745040d9.png" alt="X mark" width="16" height="16" /> Unconfirmed</div> 
      <div class="confirmed" style="display: none"><img style="vertical-align:middle" src="/assets/checkmark-b87ae8ffea696b9c9587f26fdb656af7a21da4f7f73da01fc4bef9b35a1b9465.svg" alt="Checkmark" width="16" height="16" /> Confirmed</div> 
     </span> 
     </div> 
    </div> 

    <div class="actions buttonContainer"> 
     <input type="submit" name="commit" value="Send Confirmation Email" id="submit" class="button btn" data-disable-with="Send Confirmation Email" /> 
    </div> 
    </form> 
</div> 

Je ne précise pas les propriétés CSS width partout, y compris la forme ou son contenant:

#confirmEmailContainer { 
    background-color: #fff; 
    text-align: left; 
} 

form { 
    margin: 4% 15%; 
    font-family: Manuelle; 
    font-size: 14px; 
} 

mais encore le récipient occupe presque toute la largeur de la zone de contenu - https://jsfiddle.net/70pgd6jn/. Comment faire pour que le formulaire n'occupe que la largeur de ses éléments?

Answer 1

Vous cherchez peut-être la display: inline-block propriété, qui permettra à votre élément conteneur pour occuper seul l'espace qu'elle requiert.

#confirmEmailContainer { 
    background-color: #fff; 
    text-align: left; 
    display: inline-block; 
} 

Answer 2

vous devez ajouter float: left-#confirmEmailContainer et overflow: hidden à #content