css - 如何使用 w3.css 显示与输入内联的标签

Question

使用 W3.CSS，我们如何显示与输入内联的标签？

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

Answer 1

人们可能想使用 w3.css 提供的解决方案(不需要覆盖 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