/ / Problème float: à droite avec une mise en page multi-colonnes? - css, css3

Problème float: droit avec une disposition multi-colonnes? - css, css3

Je veux mettre du contenu li en 2 colonnes et veulent utiliser float:right; dans fieldset, mais ça float crée un problème dans les colonnes d'affichage est. comment avec l'utilisation de float:right, ce problème peut être résolu?

Exemple: 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>

Réponses:

0 pour la réponse № 1

Vous pouvez le réparer en ajoutant width:100%; (ou quelle que soit la largeur souhaitée pour le jeu de champs) au style de votre jeu de champs

Exemple: http://jsfiddle.net/DyU9S/1/

METTRE À JOUR

Raison cela se passe:

Vous avez paramétré l’affichage de fieldset sur inlineAinsi, l’ensemble de champs ne grossira que jusqu’à la largeur à laquelle vous le spécifiez ou à la plus petite quantité d’espace possible. Si vous voulez qu'il atteigne 100%, faites l'affichage block ou inline-block. En dehors de cela, choisissez une largeur que vous souhaitez attribuer à fieldset et ce sera cette largeur.