Question

我想使用box-sizing: border-box CSS属性将表单拆分为左半部分和右半部分：

<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或者其他东西）。如果我删除了浮动属性并将其显示更改为inline-block，则它们会重新开始流动，但它们不再排列在彼此旁边。

有没有办法在这里使用border-box而无需添加clearfix元素（或:after伪元素）？

供参考，here's使用花车的小提琴，here's使用内联块的小提琴。

Answer 1

这是一个非常普遍的问题。

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

.container { overflow: hidden; }

Before 和 After

使用`box-sizing：border-box`和`inline-block`元素

1 个答案: