Входная граница 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 пикселей