Füllen Sie ein Div mit einem Eingang und Knopf

Question

Eben ich habe ein div mit zwei Eingängen innen. Ein Textfeld und eine Schaltfläche. Ich möchte das div zu einer bestimmten Breite (sagen wir 30em) und lassen Sie das Textfeld füllen 80% davon und die Schaltfläche die anderen 20%. Die Eingänge sollten nebeneinander liegen. Das Div ist in der Seite zentriert.

<div class="container"> 
    <input class="input" type="text" placeholder="Some text"> 
    <input class="button" type="submit"> 
</div> 

Ich habe diese SCSS bisher

.container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 30em; 
    .input { 
    width: 80%; 
    } 
    .button { 
    width: 20%; 
    } 
} 

Bisher ist das Textfeld nimmt 80%, sondern schwebt in der Mitte und die Taste darunter. Wie kann ich sie nebeneinander aufstellen, um das div zu füllen?

Answer 1

Diese Elemente sind standardmäßig inline, so dass der Leerraum zwischen ihnen erhalten bleibt, was deren Gesamtbreite 20% + 80% + [ein Leerzeichen] ergibt, was> 100% ist.

können Sie ...

• den weißen Raum zwischen ihnen
• Verwendung display: flex auf dem
• Schwimmer die Eingänge Eltern entfernen.

* {margin:0;padding:0;box-sizing:border-box;} 
 
.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 30em; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.input { 
 
    width: 80%; 
 
} 
 

 
.button { 
 
    width: 20%; 
 
} 
 

 
.float { 
 
    overflow: auto; 
 
} 
 

 
.float input { 
 
    float: left; 
 
}

<div class="container"> 
 
    <input class="input" type="text" placeholder="Some text"><input class="button" type="submit"> 
 
</div> 
 

 
<div class="container flex"> 
 
    <input class="input" type="text" placeholder="Some text"> 
 
    <input class="button" type="submit"> 
 
</div> 
 

 
<div class="container float"> 
 
    <input class="input" type="text" placeholder="Some text"> 
 
    <input class="button" type="submit"> 
 
</div>