输入内的填充中断宽度100%


130

好的,所以我们知道即使对对象设置填充也会导致其宽度发生变化,即使它是明确设置的也是如此。尽管可以争论其背后的逻辑,但这会导致某些元素出现问题。

在大多数情况下,您只需添加一个子元素并向其中添加填充,而不是将其设置为100%,但是对于表单输入而言,这是不可能的。

看一下这个:http : //sandman.net/test/formcss.html

第二个输入的填充设置为5px,我非常喜欢默认设置。但是不幸的是,这使输入在所有方向上都增加了10px,包括在100%宽度上增加了10px。

这里的问题是我无法在输入中添加子元素,因此无法修复它。所以问题是:

有什么方法可以在输入中添加填充,同时又保持宽度100%?由于表格将以不同宽度的父级呈现,因此它必须为100%,所以我事先不知道父级的宽度。


3
stackoverflow.com/questions/628500/...对于如何使用CSS3 box-sizing属性
丹尼尔LeCheminant

15
只是要说,感谢您一直以来都在保持您的示例页面。当有人在问题中张贴一个网址,并且回答了答案后或者他们不使用jsfiddle之类的内容时,网址让我发疯。
乔纳森·杜马因

关于使用box-sizing属性;我的问题是相同的问题,但高度相同-仅将高度设置为100%意味着高度+边框+填充=容器高度。为了使输入具有容器的实际高度,我只需要使用box-sizing:content-box。
Skychan

除了我刚才说的在IE中不起作用。带有box-sizing:content-box的IE11根本不会调整高度为100%的高度。它确实尊重特定的px高度。因此,不带框大小的height:31px比高度:31px + box-sizing:content-box少6px。但想法是使用高度:100%,因此我不必担心特定的像素大小!
Skychan

Answers:


288

使用CSS3,您可以使用属性box-sizing来更改浏览器计算输入宽度的方式。

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

您可以在此处了解更多信息:http : //css-tricks.com/box-sizing/


@VíctorDieppa Garriga谢谢,这是一个很好的解决方案。
sinanakyazici

1
支持如下:Chrome(任意):调整大小的Opera 8.5+:调整大小的Firefox(任意):-moz-box-调整大小的Safari 3:-webkit-box-sizing(在5.1+版本中未提供前缀)IE8 +:方框-浆纱。我也建议将其作为可接受的答案,这是一种更优雅的解决方案。
2013年

1
为了阐明对IE的框大小调整支持,因为IE框大小属性取决于IE文档模式,因此它适用于“ IE8标准模式”及更高版本。因此,如果文档模式为“ IE8标准模式”,它也将在IE8浏览器版本中工作。希望这会
有所

老实说,这box-sizing: border-box;是我想到的第一件事,但这绝对不适合我。也许曾曾祖父母display: flex;对此感到困惑?
科迪

看起来所有主流浏览器均支持不带前缀的浏览器,并且已将其用于多个版本:caniuse.com/#feat=css3-boxsizing
Jason,

7

我不知道它与跨浏览器的兼容性如何(它可以在Firefox和Safari中使用),但是您可以尝试以下解决方案:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(仅发布我更改的值)


1
它导致IE中的问题。
塔里克

好吧,这并没有让我感到惊讶:)不要以为有一个简单的跨浏览器解决方案而不更改标记。
michaelk

好的,我现在投票支持该解决方案,因为添加margin:-5px显然不是违规行为。我在使用此功能的页面上添加了第四个输入,它似乎确实起作用。 jigsaw.w3.org/css-validator/...
桑德曼

7

一种选择是将包裹INPUTDIV具有填充的内。

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

8
将容器div填充会产生不同的结果,从而会在输入字段中添加填充。
菲利克斯·冯

再加上冯力克(Felix Fung)所说的话-您将失去在填充区域中用鼠标单击的能力,并使它聚焦在输入字段上-还有其他更值得注意的问题。只是想指出这个鲜为人知/已知的问题-使用使用此hack的网页时,这无休止地困扰着我。
eselk

5

经常被遗忘的calc可以在这里进行救援:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

由于我们知道填充会增加元素的宽度,因此我们只需从整体宽度中减去填充即可。所有主要浏览器都支持它,具有响应能力,并且不需要凌乱的包装div。


4

我遇到了与此类似的问题。我的tds输入为100%,填充很小。我所做的是补偿td上的填充,如下所示:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

8px的填充,以包括输入/​​文本区域的边框和填充。希望这可以帮助!


此技术非常适用于对齐包含填充输入的单元格的宽度与不包含填充输入的单元格的宽度。只需将右填充选择性地应用于包含100%宽度输入的任何TD。
Seb Barre'2

1

也许将border + background取下input,然后将其div用border + background和width:100%括起来,并在input?上设置边距?


这是我目前用于解决此问题的一种技巧,但是出于“样式原因”之类的原因,我宁愿在输入上使用边框。但是,是的,这就是我目前的做法,这是一个可行的解决方案
Sandman

1

我发现有效的一种解决方案是使用相对定位的父标记来绝对定位输入。

<p class="full-width-input">
    <input type="text" class="text />
</p>

适用风格:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

唯一需要注意的是,段落标记需要设置高度,因为其绝对定位的子代不会扩展其高度。这样避免了width: 100%通过将其锁定在父元素的左侧和右侧进行设置的需要。


0

尝试使用百分比进行填充:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

如果您担心使用旧浏览器的用户看不到方框阴影,只需为输入提供细微的背景色作为备份。如果您将像素用于这种事情,那么您可能会在其他地方使用它们,这可能会带来一些额外的挑战,如果遇到它们,请告诉我。


-3

我唯一想防止这种情况的就是分配类似100%-10的值。但是它有一些兼容性问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.