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 或其他 block 级元素中:

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

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

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