Charles Okwuagwu Charles Okwuagwu - 1 month ago 7
CSS Question

how to display labels inline with inputs, using w3.css

Using W3.CSS, how do we display labels inline with inputs?



<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" />

<form class="w3-container">
<p>
<label>First Name</label>
<input class="w3-input w3-border" type="text">
</p>
<p>
<label>Last Name</label>
<input class="w3-input w3-border" type="text">
</p>
<p>
<label>Email</label>
<input class="w3-input w3-border" type="text">
</p>
</form>




MJN MJN
Answer

Override default css stylings with you own

You can find input styles in following css

.w3-input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #808080;
    width: 100%;
} 

change display and width property

.w3-input {
    display: inline-block;
    width: auto;
} 

or desired width that u need..

Comments