html - 绝对定位输入的宽度不符合 CSS 规则

Question

关于绝对定位输入的样式，我发现了一件非常奇怪的事情。出于某种原因，它不遵循我的 CSS 提供的有关其宽​​度的规则。

我想要实现的是根据 left 和 right 属性设置绝对定位输入的宽度(参见代码片段，输入的宽度应为 100%，如第二个示例中的 div)。

这里有一些片段显示了我的问题。

.wrapper {
  height: 40px;
  width: 200px;
  position: relative;
  background-color: red;
  margin-bottom: 10px;
}

.wrapper > input {
  position: absolute;
  left: 0;
  right: 0;
  outline: 0;
  border: 0;
  top: 0;
  bottom: 0;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="wrapper">
  <input type="text" />
</div>

<div class="wrapper">
  <div class="inner"></div>
</div>

好的，我想你们中的一些人不明白这里真正的问题是什么。这是另一个为绝对定位输入动态提供宽度的示例。并且请不要建议 calc(100% - 20px) 因为这不是问题的重点。

.wrapper {
  height: 40px;
  width: 200px;
  position: relative;
  background-color: red;
  margin-bottom: 10px;
}

.wrapper > input {
  position: absolute;
  left: 20px;
  right: 0;
  outline: 0;
  border: 0;
  top: 0;
  bottom: 0;
}

.inner {
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="wrapper">
  <input type="text" />
</div>

<div class="wrapper">
  <div class="inner"></div>
</div>

奇怪的是，应用了相同 CSS 的 input 和 div 被解析得如此不同。

Answer 1

问题在于 input 与 div 元素不同，它们的行为也不相同。默认情况下，输入元素将具有由浏览器设置的样式，您会注意到它还有一个默认宽度，这是造成问题的原因。

如果你引用the specification或此 previous answer你将得到以下公式:

'left' + 'margin-left' + 'width' + 'margin-right' + 'right' = width of containing block

还有一个规则列表，在您的情况下，宽度永远不会自动。

对于您的 div，您将遵循此规则:

5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'

从逻辑上讲，宽度将在设置 left 和 right 后解决，您将得到所需的结果。

对于输入你会考虑这个:

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

有点复杂，但在所有情况下，输入的宽度永远不会改变。这是一些基本示例:

.box {
  width:300px;
  border:2px solid;
  height:250px;
  position:relative;
}
.box > input {
  border:0;
  background:green;
  position:absolute;
}
.box > input:nth-child(1) {
  left:0;
  right:0;
}
.box > input:nth-child(2) {
  top:50px;
  left:100%;
  right:0;
}
.box > input:nth-child(3) {
  top:100px;
  left:100%;
  right:100%;
}

.box > input:nth-child(4) {
  top:150px;
  left:50px;
  right:50px;
}
.box > input:nth-child(5) {
  top:200px;
  left:80px;
  right:100%;
}

<div class="box">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>

你可以清楚地看到，无论你使用的左/右值如何，所有的宽度都是相同的，左边决定位置。

---

您唯一的解决方案是覆盖输入元素的宽度。因此，您可以设置 left 和 width 而不是左/右，宽度等于 100% - L - R 其中 L 是左值，R 您本应正确使用的值(value)。

.box {
  width: 300px;
  border: 2px solid;
  height: 400px;
  position: relative;
}

.box > input {
  border: 0;
  background: green;
  position:absolute;
}

.box :nth-child(1) {
  left: 0;
  width: 100%;
}

.box :nth-child(2) {
  top: 50px;
  left: 80%;
  width: calc(100% - 80%);
}

.box :nth-child(3) {
  top: 100px;
  left: 100%;
  width: calc(100% - 100% + 50px);
}

.box :nth-child(4) {
  top: 150px;
  left: 50px;
  width: calc(100% - 50px - 50px);
}

.box :nth-child(5) {
  top: 200px;
  left: 80px;
  width: calc(100% - 80px);
}

<div class="box">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

您还可以将您的元素包装在另一个 div 中，并使输入 width:100% 然后在该 div 上使用左/右:

.box {
  width: 300px;
  border: 2px solid;
  height: 400px;
  position: relative;
}
.box div {
  position:absolute;
}
.box input {
  border: 0;
  background: green;
  width: 100%;
}

.box div:nth-child(1) {
  left: 0;
  right: 0;
}

.box div:nth-child(2) {
  top: 50px;
  left: 80%;
  right: 0;
}

.box div:nth-child(3) {
  top: 100px;
  left: 100%;
  right: -50px;
}

.box div:nth-child(4) {
  top: 150px;
  left: 50px;
  right: 50px;
}

.box div:nth-child(5) {
  top: 200px;
  left: 80px;
  right: 0;
}

<div class="box">
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
</div>