Wie kann ich den Wert "fill_parent" als Elementbreite festlegen?

Question

Zunächst muss ich sagen this scheint eine identische Frage mit mir. Aber es ist nicht.

Ich habe dieses HTML:

.parent{ 
 
    border: 1px solid gray; 
 
    width: 70%; 
 
} 
 

 
.title{ 
 
    border: 1px solid green; 
 
} 
 

 
.input { 
 
    /* width: fill_parent; */ 
 
}

<div class="parent"> 
 
    <span class="title">title: </span> 
 
    <input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید"> 
 
</div>

Alles was ich brauche einen Wert setzt, der width etwas wie fill_parent wie die Eingabe des bedeutet. Wie Sie sehen, basiert die Breite von .parent auf Prozent, daher wird sie geändert, wenn sich die Bildschirmgröße ändert. Deshalb kann ich keinen Wert basierend auf px als .input 's width verwenden.

Hinweis:.input{width: 100%;} ist nicht das, was ich suche, weil ich sowohl den Titel und Eingabe in der gleichen Zeile halten muss.

Irgendwelche Vorschläge?

Answer 1

Sie können display:flex; auf Ihre Eltern und dann flex:1; auf Ihre Eingabe setzen.

.parent{ 
 
    border: 1px solid gray; 
 
    width: 70%; 
 
    display:flex; 
 
} 
 

 
.title{ 
 
    border: 1px solid green; 
 
} 
 

 
.input { 
 
    flex:1; 
 
}

<div class="parent"> 
 
    <span class="title">title: </span> 
 
    <input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید"> 
 
</div>