Question

请看看这个简单的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;
}

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

我希望，第二行输入在第一行下方右对齐，因此“右上方”恰好位于“右下方”之上，“左下方”位于其左侧，如下所示：< / p>

11111111111111111111 2222222
             4444444 3333333

这可以在没有桌子的情况下完成吗？

Thx，Armin。

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;
}

Answer 2

我已经更新了这个答案。可能这是你需要的，但还有其他选择，但我不认为是这个问题的范围。

CSS代码：

form {
  overflow: hidden;
  border: 3px solid red;
  padding: 5px;
  width: 400px; // limites de form size
}
#I1,
#I2 {
  position: absolute;
  background-color: orange;
}
#I3,
#I4 {
  position: absolute;
  background-color: yellow;
}
p {
  display: block;
  border: 1px solid blue;
  position: relative;
  height: 2em; 
}
#I1,
#I4 {
   right: 25%;
}
#I2,
#I3 {
    right: 0;
}

请在此处查看完整代码：https://jsfiddle.net/uv8yrrav/18/

希望这有帮助！

Answer 3

我已经组织并清理了您的代码。使div调整其内容的方法是使用display: inline-block。我还修复了填充问题，所以现在整个内容被填充到5px。

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：

.border {
  border: 3px solid red;
  padding: 5px;
  display: inline-block;
}

#I1 {
  background-color: orange;
}

#I2 {
  background-color: yellow;
}

.top-block,
.bottom-block {
  width: 100%;
}

html：有表单调整宽度到内容吗？

3 个答案: