Question

使用W3.CSS，我们如何在输入中显示标签？

＆＃13;

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

＆＃13;

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

Answer 2

使用您自己的

覆盖默认的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;
}

或您需要的所需宽度..

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

2 个答案: