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 № 1Vous 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 inline
Ainsi, 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.