輸入邊框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像素