Problem float: right with Multi-column layout? - css, css3

Chcę umieścić treść li w 2 kolumnie i chcesz użyć float:right; w fieldset, ale to float tworzy problem w kolumnach wyświetlania. jak z użyciem float:right, ten problem można rozwiązać?

Przykład: 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>

Odpowiedzi:

Możesz to naprawić, dodając width:100%; (lub dowolną szerokość, którą chcesz ustawić) do twojego stylu

Przykład: http://jsfiddle.net/DyU9S/1/

AKTUALIZACJA

Powód tak się dzieje:

Ustawiłeś wyświetlacz pola na inline, więc zestaw pól wzrośnie tylko do szerokości, którą mu powiesz, lub najmniejszej ilości miejsca, jakie może zająć. Jeśli chcesz, aby wzrósł do 100%, dokonaj wyświetlania block lub inline-block. Poza tym wybierz szerokość, którą ma być zestaw pól i będzie to ta szerokość.