Eingabe Rand CSS

Question

Ich habe Probleme mit meinen Eingabegrenzen. Wenn ich die Eigenschaft width width ändere, ändert sich die Breite der gesamten Eingabe. Ich möchte jedoch, dass die Eingabebreite 100% beträgt. Hier ist mein Code:

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>

Beachten Sie, wie die Eingänge fast so weit wie den Textbereich strecken, aber nicht ganz. Vielen Dank!

Answer 1

Sie müssen die box-sizing-border-box hinzuzufügen width als auch verwenden, da border auch nimmt seine eigene Breite bis:

* { 
 
    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>

Erklärung

Die CSS-Box Modell ist standardmäßig content-width definiert die Gesamtdimension als:

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

Zwei Optionen.

Zuerst können Sie calc() verwenden, um dies zu ermöglichen.

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

... wobei 2px die kombinierte linke und rechte Randbreite ist.

Als nächstes können Sie box-sizing: border-box verwenden, die den Browser anweist, alle Abstände und Rahmen innerhalb der Breite zu enthalten, anstatt sie wie derzeit extra zu machen.

Answer 3

Wie Sie den Wrapper Breite von 170px gesetzt und der Eingang ist im Inneren der Hülle, wenn Sie die Breite auf 100% gesetzt wird es 170px