首页 文章

CSS包含100％宽度的输入文本

提问于
浏览 次
19

所以当我像这个例子那样设置输入文本框时，因为默认情况下它有一个边框和填充，将比200px宽 .

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;"/>
</div>

我知道我可以通过将类设置为输入标记并使用此CSS标记它来强制文本框适合200px

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

有没有更好的方法让这个文本框正确的大小，即填写100％，因为我想要它做？我不能使用固定尺寸 . 我正在使用CSS主题，因此在编译时不知道文本框填充，边距等 . 它们可以由用户即时更改 . 因此，无论文本框的填充，边框和边距是什么，解决方案都必须正常工作 .

html css

4 回答

  • 3

    我想你已经回答了自己的问题 . box-sizing: border-box; 实际上是唯一一种让元素适合其父元素的CSS方法 . css-tricks在这里详细介绍了这一点 .

    http://css-tricks.com/box-sizing/

    我不知道除了使用javascript执行某些计算然后修改输入元素之外你可以使用的任何其他CSS .

    回复于
  • 23
    <div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;border:1px;padding:4px;margin:-5px"/>
</div>
    回复于
  • 2

    是的 . 你能行的 .

    您可以在不使用 box-sizing 的情况下执行此操作而不清除 width~=99% 之类的解决方案 . Demo on jsFiddle：

    enter image description here

    HTML markup:

    <div class="input_wrap">
    <input type="text" />
</div>

    CSS:

    div {
    padding: 6px 17px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    border: 7px solid #DFDFDF;  
    padding: 0 10px;
    margin: 0 -17px; /* negative margin = border-width + horizontal padding */ 
}
    回复于
  • 3
    <div style="width:200px; height:22px; background-color:red;">
    <input type="text" name="fname" style="width:97%;margin-left:1%;"/>
</div>

    ？

    但严肃地说，这是一个jsfiddle .

    回复于

相关问题