如何使用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-输入)：

​

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

​

navigation.asp

input