問題浮動：正確的多列布局？

Question

我想把內容li放在2列中，並且想要在fieldset中使用float:right;，但是這個float會在顯示列中產生問題。如何使用float:right，這個問題可以解決？

例子：http://jsfiddle.net/w2XWu/

ol#hi{ 
    -o-column-count: 2; 
    -icab-column-count: 2; 
    -khtml-column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 3; 
    -o-column-rule: 1px solid black; 
    -moz-column-rule: 1px solid black; 
    -webkit-column-rule: 1px solid black; 
    column-rule: 1px solid black; 
} 
fieldset { 
    background-color: #EEF3F7; 
    position: relative; 
    float: right;   /*problem is this line*/ 
    direction: rtl; 
    border-radius: 5px; 
    border: 1px solid #EAEAEA; 
    margin: 10px 5px 0 0; 
    display:inline; 
} 


<fieldset> 
    <legend> 
    hi </legend> 
    <div class="find_input mediumCell"> 
     <div class="column"> 
      <ol id="hi"> 
       <li>Hello</li> 
       <li>how</li> 
       <li>what</li> 
       <li>Normalized</li> 
       <li>Mootools </li> 
       <li>CSS</li> 
       <li>attributes </li> 
       <li>More </li> 
       <li>Library</li> 
       <li>Choose </li> 
       <li>Please </li> 
       <li>Framework</li> 
      </ol> 
     </div> 
    </div> 
</fieldset> 

Answer 1

您可以通過添加width:100%;修復（或任何寬度你想要的字段集是）你的字段集風格

例子：http://jsfiddle.net/DyU9S/1/

UPDATE

發生這種情況的原因：

您已將字段集顯示設置爲inline，因此字段集只會增加到您告訴​​它的寬度或其佔用的最小空間量。如果您希望它增長到100％，請使顯示block或inline-block。除此之外，選擇一個你想要fieldset的寬度，它就是那個寬度。