如何使用 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

使用您自己的

覆盖默认 css 样式

您可以在下面找到输入法css

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

改变display和width属性

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

或您需要的宽度..

Answer 2

有人可能想使用 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

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

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

css

w3.css