CSS样式帮助我的表单输入

Question

HTML文件

<label for = "about"> About:</label>         
<textarea name="message" class="text" required></textarea>

CSS FILE

    label {
    display: inline-block;
    float: left;
    width: 90px;
    }

我需要一个CSS文件将 ABOUT：文本移到文本框的左下角

我需要CSS让它看起来像这样

Answer 1

.container{
  display: flex;
  align-items: flex-end;
}
label {
  /* display: inline-block;
  float: left; */
  width: 90px;
}

<div class="container">
  <label for="about"> About:</label>
  <textarea name="message" class="text" required></textarea>
</div>

尝试使用display: flex;

Answer 2

不需要float:left，我使用vertical-align:bottom;将标签放在底部，并为元素添加了一些边距！

label {
  vertical-align: bottom;
  width: 90px;
  display: inline-block;
  margin-bottom:3px;
}

<div class="wrapper">
  <label for="about"> About:</label>
  <textarea name="message" class="text" required></textarea>
</div>

<强>参考文献：

1. CSS vertical-align

Answer 3

您需要将其粘贴到该部分的底部。我喜欢使用position: absolute和bottom: 0;执行此操作。没有必要添加额外的div，因为你可以用这两个属性来做。

label {
  display: inline-block;
  position: absolute:
  float: left;
  bottom: 0;
  width: 90px;
}

https://jsfiddle.net/9yf4wumd/