Css寬度擬合內容

我有一個像js小提琴中的例子一樣的html頁面。我想讓每個元素自動設置寬度以自動適應孩子。有沒有辦法做到這一點，而不會擾亂整個頁面？Css寬度擬合內容

HTML

</fieldset> 
<div id = 'buttons'> 
    <button onclick="$('span.hidden_select').toggle(1000);">Test</button> 
    <span class="hidden_select"> 
    <form method="post" action="/pcr_process_batch/reassign_batch"> 
    Choose Person : 
     <select id="person" name="person"> 
     <option value="1249">Person 1</option> 
     <option value="307">Person 2</option>  
     <option value="708">Person 3</option> 
     <option value="1331">Person 4</option> 
     <input type="submit" value="submit" name="commit"> 
    </form> 
    </span> 
</div>

CSS

fieldset{ 
padding: 2px; 
background-color:#5CE68A; 
margin-top: 20px; 
float:left; 
width:50%; 
} 

    div#buttons{ 
border:1px solid black; 
width:inherit; 
max-height:inherit; 
} 

span.hidden_select{ 
margin-top:10px; 
margin-right:0; 
max-width:inherit; 
display:none; 
} 

span.hidden_select form{ 
width:auto; 
overflow:visible; 
    border:1px solid black; 
}

http://jsfiddle.net/striderinc/6G72y/6/

來源

2014-04-18 Stacked-for-life

像這樣http://jsfiddle.net/j08691/6G72y/1/？ – j08691

如何選擇評論作爲正確的答案 –

@ j08691他想拉伸的東西，或者他想限制包裝？ –

您可以在div適用float:left。

jsFiddle example

div#buttons { 
    border:1px solid black; 
    width:inherit; 
    max-height:inherit; 
    float:left; 
}

請注意，根據您的完整代碼，您可能需要清除的是，通過施加clear:left在此之後而來的HTML浮動。

來源

2014-04-18 17:20:15 j08691

我剛剛意識到我在這個表單的左側有一個塊，我已經設置了div＃buttons元素的邊距，當我向左浮動時，頁面看起來更加奇怪 –

可能想更新您的問題，然後包含該代碼。 – j08691

只是採用絕對位置你跨越{} hidden_select

span.hidden_select 
{ 
    margin-top:10px; 
    margin-right:0; 
    max-width:inherit; 
    display:none; 
    position:absolute; 
    /*added this to make it look in a same line*/ 
    top:-3px; 
}

here is fiddel

來源

2014-04-18 17:29:58

Css寬度擬合內容

回答

相關問題