怎么做到标签和输入框在一条粉色的线上，没有边框

可以使用CSS来设置输入框和标签在一条粉色的线上，并且没有边框。具体代码如下：

HTML代码：

<div class="form-group">
  <label for="inputField">标签名称</label>
  <input type="text" class="form-control" id="inputField">
</div>

CSS代码：

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 10px;
  background-color: #fff;
}

.form-group input {
  border: none;
  border-bottom: 2px solid #f06;
  padding: 5px 10px;
}

这里使用了相对定位和绝对定位来将标签定位在输入框上方，并且使用了transform属性来使标签垂直居中。同时，输入框的边框被设置为none，只保留了下边框，并且设置了粉色的颜色。

相关问题

输入框左边显示请输入用户名，没有边框但有一条粉色的底线

可以使用CSS来设置输入框左侧显示请输入用户名，没有边框但有一条粉色的底线。具体代码如下：

HTML代码：

<div class="form-group">
  <label for="inputField">请输入用户名</label>
  <input type="text" class="form-control" id="inputField">
</div>

CSS代码：

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 10px;
  background-color: #fff;
}

.form-group input {
  border: none;
  border-bottom: 2px solid #f06;
  padding: 5px 10px;
  margin-left: 120px;
}

这里使用了相对定位和绝对定位来将标签定位在左侧，并且使用了transform属性来使标签垂直居中。同时，输入框的边框被设置为none，只保留了下边框，并且设置了粉色的颜色。使用了margin-left属性来使输入框距离左侧的提示语有一定的距离。

标签和输入框设置为不在同一行

你可以使用 CSS 中的 display 属性来设置标签和输入框不在同一行。具体做法是将标签的 display 属性设置为 inline-block，将输入框的 display 属性设置为 block。这样标签和输入框就会在不同的行上显示。

例如，下面的代码将标签和输入框分别放在不同的行上：

<label for="input">输入框：</label>
<input type="text" id="input" style="display: block;">

你也可以将样式放在 CSS 文件中，以便在多个页面上重复使用：

label {
  display: inline-block;
}

input {
  display: block;
}