css: Zentralelement maximaler Breite ohne Tabellen verfügbar

Question

Ich habe es schwer, das zentrale Element in einer Linie zu bekommen, um die maximal verfügbare Breite zu nehmen. Mein zentrales Element ist das url_submit_input Element, in diesem Beispiel:

div.url_submit_wrapper { 
 
    width: 100%; 
 
} 
 
span.url_submit_title { 
 
    display: inline-block; 
 
} 
 
.url_submit_input { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.url_submit_button { 
 
    display: inline-block; 
 
}

<div class="url_submit_wrapper"> 
 
    <span class="url_submit_title">URL:</span> 
 
    <input class="url_submit_input" name="url" type="text"> 
 
    <input class="url_submit_button" type="submit" value=" Submit "> 
 
</div>

Der Ausgang I zu bekommen versuchen, ist:

URL: [     maximum width    ] [SUBMIT] 

Auch wenn mit einem Handy angesehen (dh Medienabfrage mit der Bildschirmbreite < 600), ich brauche es so aussehen:

URL: 
[      maximum width    ] 
[ SUBMIT ] 

Wie sollte dies ohne Tabellen gemacht werden? Der Code, den ich gepostet habe, rendert nur die mobile Version, aber nicht den Desktop.

Answer 1

können Sie .url_submit_wrapper {display: inline-flex;}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/