Отображать флажки в полевом поле на три столбца

У меня есть набор полей с флажками, организованными с помощью ul, li. У меня три списка (все части одного и того же набора). Я хочу отобразить их в три столбца, каждый ul (list) является столбцом слева направо.

Мне нужно обернуть каждую улицу в DIV?... Мне нужна помощь.

Вот как это выглядит на моем сайте прямо сейчас... MaddenUltimateZone.com

<fieldset>
 <legend>Position:</legend>
 <ul>
 <li>Offense</li>
 <li>
 
 <label for="qb">QB</label>
 </li>
 <li>
 
 <label for="hb">HB</label>
 </li>
 <li>
 
 <label for="fb">FB</label>
 </li>
 <li>
 
 <label for="wr">WR</label>
 </li>
 <li>
 
 <label for="te">TE</label>
 </li>
 <li>
 
 <label for="lt">LT</label>
 </li>
 <li>
 
 <label for="lg">LG</label>
 </li>
 <li>
 
 <label for="c">C</label>
 </li>
 <li>
 
 <label for="rg">RG</label>
 </li>
 <li>
 
 <label for="rt">RT</label>
 </li>
 </ul>

 <ul>
 <li>Defense</li>
 <li>
 
 <label for="le">LE</label>
 </li>
 <li>
 
 <label for="re">RE</label>
 </li>
 <li>
 
 <label for="dt">DT</label>
 </li>
 <li>
 
 <label for="lolb">LOLB</label>
 </li>
 <li>
 
 <label for="mlb">MLB</label>
 </li>
 <li>
 
 <label for="rolb">ROLB</label>
 </li>
 <li>
 
 <label for="cb">CB</label>
 </li>
 <li>
 
 <label for="fs">FS</label>
 </li>
 <li>
 
 <label for="ss">SS</label>
 </li>
 <li>
 
 <label for="rt">RT</label>
 </li>
 </ul>

 <ul>
 <li>Special Teams</li>
 <li>
 
 <label for="k">K</label>
 </li>
 <li>
 
 <label for="p">P</label>
 </li>
 </ul>
 </fieldset>

Здесь мой CSS... может быть, что-то противоречиво.

#filters {
 background: #F2F2F2;
 border: 1px solid #CCCCCC;
 padding: 15px;
 }

 .clearfix:before,
 .clearfix:after {
 content: " ";
 display: table;
 }

 .clearfix:after {
 clear: both;
 }

 .clearfix {
 *zoom: 1;
 }

 fieldset {
 border: 1px solid #ccc;
 border-radius:4px;
 padding: 4px;
 display:inline-block;
 }

 .tier {
 float: right;
 width: 125px;
 }

 .position {
 float: right;
 width: 300px;
 margin: 0 10px 0 0;
 }

 .position ul {
 display:inline-block;
 vertical-align:top;
 }

 input[type="radio"], 
input[type="checkbox"] { position: absolute; left: -999em; }

label:before { 
 display: inline-block; position: relative; top:0.25em; left:-2px; 
 content:''; width:25px; height:25px;
 background-image:url(img/formelements.png); }

input[type="checkbox"] + label:before { background-position: 0 -25px;}
input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }

input[type="radio"] + label:before { background-position: -25px -25px;} 
input[type="radio"]:checked + label:before { background-position: -25px 0;}

 /* Remove the custom styling for IE 7-8 */

 .ie8 label:before { display:none; content:none; }

 .ie8 input[type="checkbox"],
 .ie8 input[type="radio"],
 .ie7 input[type="checkbox"],
 .ie7 input[type="radio"]{ 
 position: static; left:0; }

 .ie8 input[type="checkbox"],
 .ie8 input[type="radio"] { 
 position:relative; top:5px; margin-right:0.5em;} 

input[type="text"]:focus, textarea:focus {
 border-color:#000;
 }
1 ответ

.position ul{
 display: inline-block;
 vertical-align: top;
}

http://jsfiddle.net/w5aFW/1

licensed under cc by-sa 3.0 with attribution.