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

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

Linda Hamilton
发布: 2024-10-30 03:03:28
原创
457 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板