将DIV包装到内容仅包含在内容在一条线上时

Question

我试图将多个fieldsets包装在周围的div中。当浏览器足够大以适合所有fieldsets在一行上时，div会自动换行，但是当它们流向下一行时，div边框将对齐浏览器窗口的右边缘（Chrome）。我怎样才能克服这个不使用设置宽度或使用JS？

HTML

<div id="wrapper" class="display-inline-block"> 
     <fieldset id="f1" class="display-inline-block"> 
      <legend>F1</legend> 
      <p>Lorem ipsum dolor sit amet</p> 
     </fieldset> 
     <fieldset id="f2" class="display-inline-block"> 
      <legend>F2</legend> 
      <p>Lorem ipsum dolor sit amet</p> 
     </fieldset> 
    </div 

CSS

#wrapper 
    { 
     margin: 10px; 
     padding: 10px; 
     border: 1px solid red; 
    } 
    .display-inline-block 
    { 
     display:-moz-inline-stack; 
     display:inline-block; 
     zoom: 1; 
     *display: inline; 
     vertical-align: top; 
    } 

Answer 1

看了一眼这在过去的5分钟，看起来并不像它可能比可能是一个媒体查询等纯CSS。