html：表单是否可以根据内容调整宽度？

Question

请看一下这个简单的 jsfiddle：

--> JSFiddle

html:

<form>
  <p>
    <input id="I1" value="above left" size="40" />
    <input id="I2" value="above right" size="10" />
  </p>
  <p>
    <input id="I3" value="below right" size="10" />
    <input id="I4" value="below left" size="20" />
  </p>
</form>

CSS：

form {
  overflow: hidden;
  border: 3px solid red;
  padding: 5px;
}

#I1,
#I2 {
  background-color: orange;
  float: left;
}

#I3,
#I4 {
  background-color: yellow;
  float: right;
}

我想要的是红色边框（=表单宽度）自动调整到两个顶部输入的宽度（当然还有填充）。

然后，我期望第二行输入在第一行输入的下方右对齐，因此“右上方”将恰好位于“右下方”的上方，而“左下方”则位于其左下方，如下所示：

11111111111111111111 2222222
             4444444 3333333

这可以在没有表格的情况下完成吗？

谢谢，阿明。

Answer 1

这当然可以在没有表格的情况下完成:)。对于表单，您可以设置：

form {
  display: inline-block;
  padding: ...;
}

这将防止表单扩展到屏幕的整个宽度。它将与其中的元素一样宽，或者，如果您手动定义其宽度，则与指定的一样宽。

如果您不希望任何元素出现在表单包含元素内的表单两侧，则可以将其包装在 div 或其他块级元素中：

<div>
  <form>
    <!-- Rest of content -->
  </form>
</div>

为了删除每个 上方和下方的间距p，根据您的评论，删除它们的 margin-top 和 margin-bottom，因为它们默认有一个边距：

p {
    margin-bottom: 0;
    margin-top: 0;
}