html - Css 宽度适合内容

Question

我有一个 html 页面，就像 js fiddle 中的示例一样。我想让每个元素自动设置宽度以自动适合 child 。有没有办法在不扰乱整个页面的情况下做到这一点？

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/

Answer 1

您可以在 div 上应用 float:left。

jsFiddle example

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

请注意，根据您的完整代码，您可能需要通过应用 clear:left 清除此后 HTML 上的 float 。