html - 如何将div内容设置为垂直？

Question

我希望所有的内容都是垂直的:

<div class="name left">
      <label for="name">Nome</label>
      <input type="text" name="name" id="name">
    </div>

.name
{
  display: table-cell;
  vertical-align: middle;
}

这行不通，甚至是水平的，为什么？

Answer 1

对于“垂直”，您是否希望旋转实际的文本，使其垂直向下延伸到页面下方？

在这种情况下，您正在寻找 transform: rotate(90deg) :

.name {
  position: absolute;
  top: 100px;
  left: 0;
  transform: rotate(90deg);
}

<div class="name left">
  <label for="name">Nome</label>
  <input type="text" name="name" id="name">
</div>

---

如果您只是想要 <label> 坐在 <input> 之上(如评论所述)，您只想提供 label position: absolute 并将其与 left 略微偏移.

但是，请注意，这会导致您的输入显示在文本下方:

.name > label {
  position: absolute;
  left: 10px;
}

<div class="name left">
  <label for="name">Nome</label>
  <input type="text" name="name" id="name">
</div>

因此，您可能只是在寻找 placeholder attribute在 <input> 上相反，当用户开始输入 <input> 时它会消失(并在他们再次清空时重新出现):

<div class="name left">
  <input type="text" name="name" id="name" placeholder="Nome">
</div>

这意味着 <label>不再需要。

---

为了让名字高于 <input> ，而不是“在其之上”，您只是想提供 <label> <强> display: block 。 <强> Block-level elements 占满 width 它们的父元素，所以每个元素都在一个新行上:

.name > label {
  display: block;
}

<div class="name left">
  <label for="name">Nome</label>
  <input type="text" name="name" id="name">
</div>