Question

关于样式绝对位置输入，我发现了一件非常奇怪的事情。由于某些原因，它没有遵循我的CSS提供的有关宽度的规则。

我要实现的是基于left和right属性设置绝对定位输入的宽度（请参见摘要，在第二个示例中，输入的宽度应为div的100％）。

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

.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，您将遵循以下规则：

'width'是'auto'，'left'和'right'不是'auto'，然后求解'width'

从逻辑上讲，在左右设置后即可解析宽度，您将获得所需的结果。

对于输入，您将考虑：

如果三个都不是'auto'：如果'margin-left'和'margin-right'都为'auto'，则在额外的约束条件下求解方程，使两个边界获得相等的值，除非这样做它们为负，在这种情况下，当包含块的方向为'ltr'（'rtl'）时，请将'margin-left'（'margin-right'）设置为零，并求解'margin-right'（'margin-left '）。如果“ margin-left”或“ margin-right”之一为“ auto”，则求解该值的方程式。如果值过于受限，则忽略“ left”（如果包含块的“ direction”属性为“ rtl”）或“ right”（如果“ direction”为“ ltr”）的值并求解该值。

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

.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的宽度，而不是left / right，其中L是左边的值，R是您将要使用的right的值。

.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>

Answer 2

到目前为止，我已经找到了两种可能的解决方案。正如@arieljuod所建议的那样，将width设置为left和right的wrapper元素应该可以解决问题。

第二个选项是使用calc(100% - Xpx)。这将设置input的有效宽度。

仍然没有发现为什么会这样，我们如何迫使input尊重这些样式。

Answer 3

您可以使用以下方法覆盖浏览器如何计算元素宽度：

.wrapper > input {
  width: inherit;
}

默认设置为inline-block的每个元素（例如按钮或文本区域）都会发生同样的事情

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

3 个答案: