当前位置: 首页 > 面试题库 >

宽度:自动 领域

萧飞
2023-03-14
问题内容

新手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>

然后有两个问题:

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

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

谢谢!


问题答案:

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

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

不填充宽度:

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

填充宽度:

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

尺寸更小,宽度更小:

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

更新

几分钟后,这是我能做的最好的事情。在FF,Chrome和Safari中关闭1像素,在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>


 类似资料:
  • 问题内容: 我有一个元素,其内容更改时我想为其宽度设置动画。它具有,并且永远不会改变。我已经看到了这个技巧,但这是为了在两个值之间进行转换并设置一个。我根本不操纵值,仅操纵内容,我希望元素的大小随动画而变化。CSS完全有可能吗? 这是我的代码的简化版本: 当用户将鼠标悬停在元素上时,我希望更改的大小可以动画。 问题答案: 正如我所评论的,还不能设置动画,所以请使用/ 技巧,或者,如果需要更精确的设

  • 问题内容: 鉴于以下几点,我如何使我的最后一列自动调整大小?(最后一列应自动调整内容的宽度。假设我只有1 li元素应该收缩,而我只有3 li元素等等): CSS: 问题答案: 以下将解决您的问题: 灵活的基于类的解决方案 一种更灵活的解决方案是创建一个类,并将其应用于您要确保其内容适合一行的任何列: 然后在您的HTML中:

  • 问题内容: 我在HTML5项目中使用了Google图表。它使用JSON值(来自DB)来绘制图形。 我的需求是如果JSON值中的数据大于5到6,则需要一个滚动条。我已经通过JSFiddle创建了示例附加链接。 目前,我已经给出了22个值。当JSON值具有3或4个值时,我需要相同的效果。条形宽度没有任何变化,即使JSON有50个值,它也应保持相同的宽度。 请给我解决方案,非常感谢。:) 这是链接:-h

  • 问题内容: 我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局,但是在页眉下面有一个产品图片,该图片始终为100%的宽度(设计显示,该图片始终从一条边到另一条边)。根据屏幕的宽度,图像的高度显然会相应地进行调整。我最初使用img(CSS宽度为100%)来完成此操作,效果很好,但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像- 假设尺寸较小,中等,例如,同一张图片的大版本。我知道您

  • 问题内容: 我有一个UILabel,一个UIView在情节提要中并排包含其他子视图。UIView应该紧靠UILabel的右边缘(跟踪约束为1),但我还需要UIlabel(左侧的UIlabel)将其宽度设置为等于其内容大小,除非它达到最大宽度。视觉上: |标签文字| | UIViewWithSubviews | 我需要以下约束: 1)标签应明智地调整宽度大小,除非达到最大大小,并且高度也是动态的,这

  • 我目前正在为一家公司做一个移动登陆页面。这是一个真正基本的布局,但在标题下方有一个产品的图像,它将永远是100%的宽度(设计显示它总是从边到边)。根据屏幕的宽度,图像的高度显然会相应地调整。我最初用一个img(CSS宽度为100%),它工作得很好,但我意识到我希望使用媒体查询来为基于不同分辨率的不同图像提供服务-例如,同一图像的小、中、大版本。我知道你不能用CSS改变img src,所以我想我应该