[英]How do I make my DIV only take up the width of the elements it contains?
我在較大的div內有一個小表格:
<div id="confirmEmailContainer">
<form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><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>
我沒有在任何地方指定CSS width
屬性,包括表單或其容器:
#confirmEmailContainer {
background-color: #fff;
text-align: left;
}
form {
margin: 4% 15%;
font-family: Manuelle;
font-size: 14px;
}
但是容器幾乎占據了內容區域的整個寬度-https://jsfiddle.net/70pgd6jn/ 。 如何使表格僅占據其元素的寬度?
您應該將float: left
在#confirmEmailContainer
並overflow: hidden
在#content
您可能正在尋找display: inline-block
屬性,該屬性將允許您的容器元素僅占用其所需的空間。
#confirmEmailContainer {
background-color: #fff;
text-align: left;
display: inline-block;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.