输入边框CSS

Question

我遇到输入边框有问题。当我更改边框宽度属性时，它会更改整个输入的宽度。但是，我希望输入的宽度为100％。这里是我的代码：

CSS

#wrapper { 
 
     width: 170px; 
 
    } 
 
    textarea { 
 
     border-color: #eee; 
 
     border-width: 1px; 
 
    } 
 
    label, textarea, input { 
 
     width: 100%; 
 
     display: block; 
 
    } 
 
    input { 
 
     border-style: solid; 
 
     border-width: 1px; 
 
    }

<div id="wrapper"> 
 
    <form> 
 
     <label for="comments">Comments</label> 
 
     <textarea name="comments" rows="5"></textarea> 
 
     <label for="date">Date</label> 
 
     <input type="text" name="date"> 
 
     <label for="time">Time</label> 
 
     <input type="text" name="time"> 
 
     <label for="longitude">Longitude</label> 
 
     <input type="text" name="logitude"> 
 
     <label for="latitude">Latitude</label> 
 
     <input type="text" name="latitude"> 
 
    </form> 
 
<div>

注意的投入如何舒展几乎至于文本区域，但并不完全。谢谢！

Answer 1

您需要使用box-sizing来border-box添加width为好，如border也采取了自己的宽度：

* { 
 
    box-sizing: border-box; 
 
} 
 
#wrapper { 
 
    width: 170px; 
 
} 
 
textarea { 
 
    border-color: #eee; 
 
    border-width: 1px; 
 
} 
 
label, textarea, input { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
input { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}

<div id="wrapper"> 
 
    <form> 
 
    <label for="comments">Comments</label> 
 
    <textarea name="comments" rows="5"></textarea> 
 
    <label for="date">Date</label> 
 
    <input type="text" name="date"> 
 
    <label for="time">Time</label> 
 
    <input type="text" name="time"> 
 
    <label for="longitude">Longitude</label> 
 
    <input type="text" name="logitude"> 
 
    <label for="latitude">Latitude</label> 
 
    <input type="text" name="latitude"> 
 
    </form> 
 
</div>

说明

CSS盒模型，默认情况下content-width将总维度定义为：

个

width = contentWidth + paddingLeftWidth + borderLeftWidth 
height = contentHeight + paddingLeftHeight + borderLeftHeight 

http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg

Answer 2

两个选项。

首先，您可以使用calc()来实现此目的。

input { width: calc(100% - 2px); } 

...其中2px是组合的左右边界宽度。

接下来，您可以使用box-sizing: border-box，它告诉浏览器在宽度范围内包括任何填充和边框，而不是像当前那样增加额外的宽度。

Answer 3

当你通过170像素设置包装宽度和输入包装内，当设置宽度为100％，这将是170像素