1

現在のプロジェクトでは、フォームに 1 つの問題があります。フォーム内のラベルのフォント サイズがデフォルトよりも大きい可能性があります。上に上げると、右側の入力が垂直方向に中央揃えになるはずです。

Bootstrap と Foundation を調べましたが、どちらもこの問題の解決策がありませんでした。

<form action="" class="m-form">
 <ol>
   <li>
     <label for="sample">A Sample Label</label>
     <input type="text" id="sample" class="m-form__textfield" value="A Sample Input">
   </li>
 </ol>


.m-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  label:first-child {
    box-sizing: border-box;
    display: block;
    float: left;
    padding: .25em 2em .25em 0;
    width: 50%;

    font-weight: bold;
    line-height: 1.5;
    text-align: right;
  }
  .m-form__textfield {
    box-sizing: border-box;
    float: left;
    padding: .5em;
    width: 50%;

    border: 1px solid #ccc;
    border-radius: 3px;
  }
}

}

デモ: http://jsfiddle.net/qSNH5/1/

それに対する簡単な解決策はありますか？

4

2 に答える 2

1

Vertical-Align プロパティの使用

CSS にいくつかの変更を加えました。

label:first-child {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding: .25em 2em .25em 0;
    width: 40%;      
    font-weight: bold;
    line-height: 1.5;
    text-align: right;
}
.m-form__textfield {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding: .5em;
    width: 50%;               
    border: 1px solid #ccc;
    border-radius: 3px;
}

要素をフローティングする代わりに、プロパティを使用display: inline-blockしてから適用してみてください。vertical-align: middle

% 幅には注意してください。50% の値を指定すると、パディング、マージン、ボーダーなどの他の要素によっては、要素が 2 行目に折り返される可能性があります。

デモ: http://jsfiddle.net/audetwebdesign/AhZFm/

于 2013-08-07T13:52:35.950 に答える