首页 >web前端 >css教程 >为什么 `width: auto` 不能按预期的 `` 字段工作,如何让它们填充可用空间?

为什么 `width: auto` 不能按预期的 `` 字段工作,如何让它们填充可用空间?

Linda Hamilton
Linda Hamilton原创
2024-10-30 03:03:28472浏览

Why doesn't `width: auto` work as expected for `` fields, and how can I make them fill available space?

width:auto 的行为字段

问题:

尽管预期块级元素的 width:auto 将允许元素填充可用空间,但它似乎不起作用的方式元素。澄清 width:auto 的定义,并提出一个解决方案来实现填充 的可用空间的所需行为。

答案:

的宽度元素是根据其大小属性计算的,而不是宽度样式属性。默认大小值决定初始自动宽度。

要实现填充可用空间的预期行为,请尝试设置 width:100% 而不是 width:auto。

示例:

<code class="html"><form action="" method="post" style="width:200px;background:khaki">
  <input style="width:100%" />
</form></code>

额外注意:

要进一步微调宽度,请添加负边距和边框以取消浏览器应用的默认边距和边框。这可以确保不同浏览器之间的一致性,但 Internet Explorer 除外,它以不同的方式应用边框。

以上是为什么 `width: auto` 不能按预期的 `` 字段工作,如何让它们填充可用空间?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn