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>'s 是浮动的，它们不再流入，并且<form>元素的高度为 0（除非我添加了 clearfix 或其他东西）。如果我删除 float 属性并将它们的显示更改为inline-block，它们会重新流动，但它们不再彼此相邻排列。

有什么方法可以border-box在这里使用而不需要添加 clearfix 元素（或:after伪元素）？

作为参考，这是一个使用浮点数的小提琴，这是一个使用 inline-block 的小提琴。

4

1 回答 1

3

这是一个很常见的问题。

在容器上添加一个overflow值，将使浏览器重新计算容器的尺寸，尽管它没有非浮动元素。

.container { overflow: hidden; }

之前和之后

于 2012-10-31T22:04:33.850 回答