Question

我有一个html页面，就像js小提琴中的例子一样。我想让每个元素自动设置宽度以适合孩子。反正有没有打乱整个页面呢？

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

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

<强> jsFiddle example

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

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

Answer 2

只需将绝对位置应用于{span_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

Css宽度适合内容

2 个答案: