表单样式垂直对齐答案

【问题标题】：form styling vertical align表单样式垂直对齐
【发布时间】：2012-09-06 10:54:46
【问题描述】：

我在设置表单样式时遇到问题。标记为目标组的部分我无法使其垂直对齐。请参阅下面的屏幕截图。我添加了颜色边框以帮助调试 css。

我为此创建了一个 js fiddle http://jsfiddle.net/uuNTC/

下面是精简版的代码

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
}

【问题讨论】：

标签： css webforms styling

【解决方案1】：

使用display: inline-block; 的好处之一是您可以指定垂直对齐方式。在this fiddle 中，我将.filterLabel 元素的垂直对齐设置为vertical-align: top;。不利的一面是，对于单行输入旁边的标签（“日期”和“包含 'On Request' With”标签），您需要返回默认的 vertical-align: baseline;，或者设置相应的 @ 987654327@ 元素向上一点。

【讨论】：

谢谢。中间可以垂直对齐吗？
是的 :-p vertical-align: middle; 而不是 vertical-align: top;，但您还需要在相邻的 SELECT 上指定 vertical-align: middle;。然后SELECT 和LABEL 将相互对齐。
当所有元素都有vertical-align: top;时，尝试让元素对齐得更好一点：jsfiddle.net/uuNTC/18 除了Chrome，不知道它在其他任何东西中的外观，但单选项SELECT对齐仍然关闭，我似乎无法修复它......现在放弃。