2

フォームのスタイリングに問題があります。宛先グループというラベルの付いたセクションは、垂直方向に揃えることができません。以下のスクリーンショットを参照してください。cssのデバッグに役立つ色の境界線を追加しました。

ここに画像の説明を入力してください

このhttp://jsfiddle.net/uuNTC/用にjsフィドルを作成しました

以下は、コードの簡略版です。

HTML

<ul id="ulFilterList">
  <li>
     <div class="filterLabel" id="labelDates">Dates</div>

          <input type="text" value="03/09/2012" name="dateFrom" id="dateFrom" class="dateInputs">
          <input type="text" value="09/09/2012" name="dateTo" id="dateTo" class="dateInputs">

  </li>
  <li>   
      <div class="filterLabel" id="labelOnRequest">Include "On Request" With:</div>
      <select name="onRequest" id="onRequest">
          <option selected="selected" value="1">Stop Sell</option>
          <option value="2">Available</option>
      </select>

  </li>
  <li>

      <div class="filterLabel" id="labelDestinationGroups">Destination Group:</div>
          <select size="10" multiple="multiple" name="destinationGroups[]" id="destinationGroups">

            <option value="Tunisia All">Tunisia All</option>
            <option value="Turkey All">Turkey All</option>
            <option value="Turkey PNR">Turkey PNR</option>
            <option value="UAE Abu Dhabi ">UAE Abu Dhabi </option>
            <option value="UAE All Dubai">UAE All Dubai</option>
            <option value="VIE">VIE</option>
            <option value="VIE">MORE</option>
            <option value="VIE">MORE</option>
            <option value="VIE">MORE</option>
            <option value="VIE">MORE</option>
            <option value="VIE">MORE</option>
            <option value="VIE">MORE</option>
          </select>
  </li>
</ul>

css

ul#ulFilterList,
ul#ulFilterList li  { margin: 0px; padding: 0px }

.dateInputs { margin:0px; text-align:left; width: 50px; display: inline-block;   }

#ulFilterList { width: 100% }

ul#ulFilterList li
{
  list-style:none;
  margin-bottom: 5px;
  border: solid 1px blue;
}


.filterLabel {
    font-weight: normal;  
    width: 29%;  
    display: inline-block;
    text-align:right;
    height: 100%;
    font-size: 11px ;
    margin-top: auto
}
4

1 に答える 1

2

を使用する利点の1つはdisplay: inline-block;、垂直方向の配置を指定できることです。このフィドル.filterLabelでは、要素の垂直方向の配置をに設定しましたvertical-align: top;。欠点としては、単一行入力の横にあるラベルのデフォルトに戻すかvertical-align: baseline;（「日付」および「要求に応じて」ラベルを含める）、対応するINPUT要素のスタイルを少し上に上げる必要があります。 。

于 2012-09-06T11:05:58.217 に答える