绝对定位输入的宽度不符合CSS规则 [英] Width of absolute positioned input doesn't follow CSS rules

问题描述

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

I've found a really strange thing regarding styling absolute positioned input. For some reason, it doesn't follow my CSS provided rules regarding its width.

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

What I want to achieve is to set the width of absolute positioned input based on the left and right property (see the snippet, input should have width 100% as the div in the second example).

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

Here some snippet showing my problem.

.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)，因为这不是问题的重点.

Ok, I think some of you don't understand what's the real problem here. Here is another example of dynamic provided width for absolute positioned input. And please don't suggest the calc(100% - 20px) because this is not the point of the question.

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

It's just weird input and div having the same CSS applied are parsed so different.

推荐答案

问题是 input 与 div 元素不同，它们不会表现出相同的.默认情况下，输入元素将由浏览器设置样式，您会注意到它也具有默认宽度，这是造成问题的原因.

The issue is that an input is not like a div element and they won't behave the same. An input element will by default have styling set by the browser and you will notice that it also have a default width which is creating the issue.

如果您引用规范或对此上一个答案，您将具有以下公式:

If you refer to the specification or to this previous answer you will have the following formula:

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

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

Also a list of rules and in your case the width is never auto.

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

For your div you will fall into this rule:

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

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

Logically the width will be resolved after setting left and right and you will get the needed result.

对于输入，您将考虑以下内容:

For the input you will consider this:

如果三个都不是'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")的值并求解该值.

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.

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

A bit complex but in all the cases the width of the input will never change. Here is some basic example:

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

您可以清楚地看到，所有宽度均相同，无论您使用的左/右值是多少，而左决定位置.

As you can clearly see, all the width are the same whataver the values of left/right you use and the left is deciding the position.

您唯一的解决方案是覆盖输入元素上的宽度.因此，您可以设置宽度为 100％-L-R 的left和width，而不是left/right，其中<​​code> L 是左值，而 R 您本该使用的值.

Your only solution is to override the width on the input element. So instead of left/right you can set left and width with width equal to 100% - L - R where L is the left value and R the value you would have used for 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上使用向左/向右:

You can also wrap your element inside another div and make the input width:100% then use left/right on that 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>

这篇关于绝对定位输入的宽度不符合CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！