3

box-sizing: border-boxCSS プロパティを使用して、フォームを左半分と右半分に分割したいと思います。

<form class=container>
  <fieldset class=left>
    <label>Description</label>
    <textarea name=description></textarea>
  </fieldset>
  <fieldset class=right>
    <label>Name</label>
    <input type=text name=name />
  </fieldset>
</form>

これを機能させるには、両方の<fieldset>要素を左にフロートする必要があります。

.left, .right {
  width: 50%;
  margin-left: 0px;
  marign-right: 0px;
  box-sizing: border-box;
  float: left;
}

問題はもちろん、<fieldset>がフロートされているため、インフローではなくなり、<form>要素の高さが 0 になることです (clearfix などを追加しない限り)。float プロパティを削除して表示を に変更するとinline-block、フローに戻りますが、隣同士に並ぶことはなくなります。

border-boxclearfix 要素 (または:after疑似要素)を追加する必要なく、ここで使用する方法はありますか?

参考までに、フロートを使用するフィドルとインラインブロックを使用するフィドルを次に示します。

4

1 に答える 1

3

これは非常に一般的な問題です。

コンテナに値を追加するoverflowと、フローティングされていない要素がない場合でも、ブラウザでコンテナのサイズを再計算できます。

.container { overflow: hidden; }

前後_ _

于 2012-10-31T22:04:33.850 に答える