为什么display:block;width:auto;我的文本输入不像div那样填充容器宽度？
我的印象是div只是一个具有自动宽度的块元素.在下面的代码中,div和输入不应该有相同的尺寸吗？
如何获得填充宽度的输入？100%宽度不起作用,因为输入具有填充和边框(导致最终宽度为1像素+5像素+ 100%+ 5像素+ 1像素).固定宽度不是一个选项,我正在寻找更灵活的东西.
我更喜欢直接回答变通方法.这似乎是一个CSS怪癖,理解它可能会有用.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>
我应该指出我已经可以使用包装器解决方法做到这一点.除了与页面语义和CSS选择器关系的这种联系之外,我试图理解问题的本质以及是否可以通过改变INPUT本身的性质来克服它.
好的,这很奇怪!我发现解决方案是简单地添加max-width:100%到输入width:100%;padding:5px;.然而,这引发了更多问题(我将在另一个问题中提出),但似乎宽度使用普通的CSS框模型,max-width使用Internet Explorer边框模型.真奇怪.
好吧,最后一个似乎是Firefox 3中的一个错误.Internet Explorer 8和Safari 4将最大宽度限制为100%+填充+边框,这是规范所要做的.最后,Internet Explorer做对了.
天啊,这真棒!在玩这个游戏的过程中,在尊敬的大师Dean Edwards和Erik Arvidsson的帮助下,我设法将三个独立的解决方案拼凑在一起,在具有任意填充和边框的元素上实现真正的跨浏览器100%宽度.见下面的答案.此解决方案不需要任何额外的HTML标记,只需要一个类(或选择器)和旧版Internet Explorer的可选行为.
<div class="container">
<input type="text" />
<div class="filler"></div>
</div>
div.container {
padding: 5px;
border: 1px solid black;
background-color: gray;
}
div.filler {
background-color: red;
height: 5px;
}
input {
display: block;
}
为什么输入框不能扩展到具有相同的外部宽度div.filler？也就是说,为什么输入框不像其他块元素那样扩展以适应其容器width: auto;？
我尝试检查Firebug中的"用户代理CSS",看看我是否可以在那里找到一些东西.没运气.我找不到CSS中的任何具体差异,我可以专门链接到输入框,其行为与常规不同div.filler.
除了好奇之外,我想知道为什么这是为了找到一种设置宽度并忘记它的方法.我目前明确设置两者input及其包含块元素宽度的做法似乎是多余的,而不是模块化的.虽然我熟悉将输入元素包装在div中然后将输入元素赋给负边距的技术,但这似乎是不可取的.
borkweb和Phrogz都提供了优秀的信息,利用了过去的border-box盒子模型.谢谢你!我想重申我的问题的重点,我打算不同于我对实际问题的拟议解决方案:
规范怎么样导致输入框格式化不像普通的块元素,如divs？边框解决方案很精彩,但它不能满足为什么输入框首先出现这种方式的原因以及为什么它们不能像普通的divs 那样表现出来,它们不使用边框这些天-box模型.
我试图将一个没有div的按钮居中。按钮如下
<body>
<button>Some Text</button>
</body>
我尝试过使用一些不同的技术，例如：
text-align: center
和
margin:0 auto;
但这些不起作用。