css - 将字段集中的复选框显示为三列

Question

我有一个字段集，其中包含用 ul、li 组织的复选框。我有三个列表（所有部分都相同的字段集）。我想将它们显示为三列，每个 ul（列表）是从左到右的一列。

我必须将每个 ul 包装在 DIV 中吗？...我需要帮助。

这是我网站上现在的样子... MaddenUltimateZone.com

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

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

    <ul>
      <li>Special Teams</li>
      <li>
        <input type="checkbox" id="k" value="K" />
        <label class="position" for="k">K</label>
      </li>
      <li>
        <input type="checkbox" id="p" value="P" />
        <label class="position" for="p">P</label>
      </li>
    </ul>
    </fieldset>

    </form>

这是我的 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;
    }

Answer 1

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

http://jsfiddle.net/w5aFW/1