% 100 girdisi ile aynı satırdaki metin ve giriş elemanı

Question

Giriş ve metin öğesi öğelerinin satırdaki kalan alanı doldurduğu ancak bir sonraki satıra gitmediği bir form oluşturmak istiyorum. İşte

kod herhangi bir yardım için https://jsfiddle.net/xz7uq18j/1/

sayesinde jsfiddle benim şimdiki (mesai) 'dir:

<div style="border: #000000 thin solid; text-align: left; padding: 10px; margin: 10px; width: 500px;"> 


Name: <input style="width: 100%"type="text" name="Name" value="Mr John Smith"> 
     Address:<textarea style="width: 100%" name="Address" rows="6" cols="50">1 Road Street 
     Town 
     Postcode</textarea> <br> 
     Primary Phone:<input style="width: 100%" type="text" name="PrimaryPhone" value="***"><br> 
     Secondary Phone:<input style="width: 100%" type="text" name="SecondaryPhone" value="N/A"><br> 
     Email Address:<input style="width: 100%" type="text" name="EmailAddress" value="N/A"><br> 
    </div> 

Answer 1

Wrap iki unsur bir div tek bir satırda bir araya istiyoruz ve bunun esnek bir div yapmak -box, CSS'de display:flex; özelliği ile.

.one-line{ 
 
    display:flex; 
 
}

<div style="border: #000000 thin solid; text-align: left; padding: 10px; margin: 10px; width: 500px;"> 
 

 
<div class="one-line"> 
 
Name: <input style="width: 100%"type="text" name="Name" value="Mr John Smith"> 
 
     Address:<textarea style="width: 100%" name="Address" rows="6" cols="50">1 Road Street 
 
     Town 
 
     Postcode</textarea> 
 
</div> <br> 
 
     Primary Phone:<input style="width: 100%" type="text" name="PrimaryPhone" value="***"><br> 
 
     Secondary Phone:<input style="width: 100%" type="text" name="SecondaryPhone" value="N/A"><br> 
 
     Email Address:<input style="width: 100%" type="text" name="EmailAddress" value="N/A"><br> 
 
    </div>