1

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>
Charles Okwuagwu
  • 10,538
  • 16
  • 87
  • 157

2 Answers2

3

One might want to use solution provided by w3.css (that doesn't require overriding w3-input): 

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-bar w3-light-grey w3-border">
    <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
    <input type="text" class="w3-bar-item w3-input w3-white w3-mobile" placeholder="Search..">
    <button class="w3-bar-item w3-button w3-green w3-mobile">Go</button>
</div>

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

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

https://www.w3schools.com/w3css/w3css_navigation.asp
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_input

Hekkaryk
  • 522
  • 5
  • 13
  • but this is not applied in general to labels against text boxes on forms. see the example in my question – Charles Okwuagwu Jun 11 '17 at 06:58
  • what i need is a way to line up labels against text boxes properly – Charles Okwuagwu Jun 11 '17 at 06:59
  • I provided some nasty-looking example for that use-case... still, I would use w3-table or w3.css grid layout. Authors of w3.css intended to make forms the way they look in your example and you might find yourself using some hackish methods to get what you want. Manjunath solution might actually look better. – Hekkaryk Jun 12 '17 at 18:44
1

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..

MJN
  • 610
  • 1
  • 7
  • 19