当前位置：theitroad>CSS width:auto 用于 <input> 字段

CSS width:auto 用于 <input> 字段

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/4622086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 23:25:57 　来源:igfitidea点击:

width:auto for <input> fields

css

提问by richb

Newbie CSS question. I thought width:autofor a display:blockelement meant 'fill available space'. However for an <input>element this doesn't seem to be the case. For example:

新手 CSS 问题。我认为width:auto一个display:block元素意味着“填充可用空间”。然而，对于一个<input>元素来说，情况似乎并非如此。例如：

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Two questions then:

那么两个问题：

  1. Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section.

  2. Is there a way to achieve my expected behaviour for a input field - ie. fill available space like other block level elements do?

  1. 是否有定义 width:auto 的确切含义？CSS 规范对我来说似乎很模糊，但也许我错过了相关部分。

  2. 有没有办法实现我对输入字段的预期行为 - 即。像其他块级元素一样填充可用空间吗？

Thanks!

谢谢！

采纳答案by Ben

An <input>'s width is generated from its sizeattribute. The default sizeis what's driving the auto width.

An<input>的宽度是从它的size属性生成的。默认值size是驱动自动宽度的原因。

You could try width:100%as illustrated in my example below.

您可以width:100%按照我下面的示例进行尝试。

Doesn't fill width:

不填充宽度：

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Fills width:

填充宽度：

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Smaller size, smaller width:

尺寸更小，宽度更小：

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

UPDATE

更新

Here's the best I could do after a few minutes. It's 1px off in FF, Chrome, and Safari, and perfect in IE. (The problem is #^&* IE applies borders differently than everyone else so it's not consistent.)

这是几分钟后我能做的最好的事情。它在 FF、Chrome 和 Safari 中关闭 1px，在 IE 中完美。（问题是#^&* IE 应用边框的方式与其他人不同，因此不一致。）

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

回答by response

"Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section."

“有没有定义 width:auto 的确切含义？CSS 规范对我来说似乎很模糊，但也许我错过了相关部分。”

No one actually answered the above part of the original poster's question.

没有人真正回答了原始海报问题的上述部分。

Here's the answer: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

这是答案：http: //www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container...

On the other hand, if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border... This may be what you want, but most likely it isn't.

To visualise the difference I made an example: http://www.456bereastreet.com/lab/width-auto/

只要 width 的值为 auto，元素就可以有水平边距、内边距和边框，而不会变得比其容器更宽......

另一方面，如果您指定 width:100%，则元素的总宽度将是其包含块的 100% 加上任何水平边距、填充和边框......这可能是您想要的，但很可能不是.

为了形象化差异，我举了一个例子：http: //www.456bereastreet.com/lab/width-auto/

回答by Jon Raasch

As stated in the other answer, width: auto doesn't work due to the width being generated by the input's size attribute, which cannot be set to "auto" or anything similar.

如另一个答案中所述，由于宽度是由输入的 size 属性生成的，因此 width: auto 不起作用，该属性不能设置为“auto”或任何类似的东西。

There are a few workarounds you can use to cause it to play nicely with the box model, but nothing fantastic as far as I know.

您可以使用一些变通方法使其与盒模型很好地配合使用，但据我所知，没有什么了不起的。

First you can set the padding in the field using percentages, making sure that the width adds up to 100%, e.g.:

首先，您可以使用百分比在字段中设置填充，确保宽度加起来为 100%，例如：

input {
  width: 98%;
  padding: 1%;
}

Another thing you might try is using absolute positioning, with left and right set to 0. Using this markup:

您可能会尝试的另一件事是使用绝对定位，将左右设置为 0。使用此标记：

<fieldset>
    <input type="text" />
</fieldset>

And this CSS:

这个CSS：

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

This absolute positioning will cause the input to fill the parent fieldset horizontally, regardless of the input's padding or margin. However a huge downside of this is that you now have to deal with the height of the fieldset, which will be 0 unless you set it. If your inputs are all the same height this will work for you, simply set the fieldset's height to whatever the input's height should be.

这种绝对定位将导致输入水平填充父字段集，而不管输入的填充或边距。然而，这样做的一个巨大缺点是您现在必须处理字段集的高度，除非您设置它，否则该高度将为 0。如果您的输入都是相同的高度，这对您有用，只需将字段集的高度设置为输入的高度即可。

Other than this there are some JS solutions, but I don't like applying basic styling with JS.

除此之外还有一些 JS 解决方案，但我不喜欢用 JS 应用基本样式。

回答by Fabricio

Because input's widthis controlled by it's sizeattribute, this is how I initializean inputwidthaccording to its content:

因为input'swidth由它的size属性控制，这就是我根据其内容初始化an 的方式inputwidth：

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

回答by mwilcox

It may not be exactly what you want, but my workaround is to apply the autowidth styling to a wrapper div - then set your input to 100%.

这可能不是您想要的，但我的解决方法是将 autowidth 样式应用于包装 div - 然后将您的输入设置为 100%。

回答by Akhil Gupta

Answer 1 - "response" gave a nice answer/link for it. To put it in short, "auto" is the default, so it is like removing any changes in the width of an element

答案 1 - “响应”给出了一个很好的答案/链接。简而言之，“auto”是默认值，因此就像删除元素宽度的任何更改

Answer 2 - use width: 100%instead. It will fill the 100% of the parent container, in this case, the "form".

答案 2 -width: 100%改用。它将 100% 填充父容器，在本例中为“表单”。

回答by Lajos Meszaros

The only option I can think of is using width:100%. If you want to have a padding on the input field too, than just place a container labelaround it, move the formatting to that label instead, while also specify the padding to the label. Input fields are rigid.

我能想到的唯一选择是使用width:100%. 如果您也希望在输入字段上有一个填充，而不只是label在它周围放置一个容器，请将格式移动到该标签，同时指定标签的填充。输入字段是刚性的。

回答by Andrew

Absolutely amazing links describing an absolute amazing feature:

描述绝对惊人功能的绝对惊人链接：

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

https://www.htmllion.com/css-flexbox.html

The gist:

要点：

  1. Put elements in a container with display: flex;.
  2. Set flex-grow: 1;on each of the contained elements.
  3. If you have elements within those contained elements that also need to grow, repeat steps 1 and 2 for the contained elements and their (contained-contained) child elements.
  4. Adapt and adjust according to varying needs (see links).
  1. 将元素放入容器中display: flex;。
  2. 设置flex-grow: 1;在每个包含的元素。
  3. 如果这些包含元素中的元素也需要增长，请对包含的元素及其（包含-包含的）子元素重复步骤 1 和 2。
  4. 根据不同的需求进行调整和调整（见链接）。

Edit - example:

编辑 -示例： 

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

相关推荐

CSS 如何更改选择选项的字体大小？

CSS 如何更改选择选项的字体大小？

CSS 是否可以使用 CSS3 绘制对角线？

CSS 是否可以使用 CSS3 绘制对角线？

CSS LESS：从变量中减去

CSS LESS：从变量中减去

仅 CSS 框阴影底部

仅 CSS 框阴影底部

相关推荐
最近更新
标签