Question

我想在paragraph元素旁边的button旁边有一个textarea。我已经做到了，但现在，当我展开textarea时，按钮也会向下移动。我想要一个按钮和一个粘贴在它div顶部的段落，所以它不能受到textarea高度的影响。

我知道这个问题必须有一个非常简单的解决方案，但我找不到它：（

这是我的代码：

＆＃13;

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}

＆＃13;

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

＆＃13;

Answer 1

对vertical-align:top和p

尝试button

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}
p,button{
  vertical-align:top;
}

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

Answer 2

在答案中查看评论..将#parent上的所有孩子设置为与顶部对齐

＆＃13;

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}

/* i added this */
#parent > * {
  vertical-align:  top;
  }

＆＃13;

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

＆＃13;

如何将div的内容粘贴到div的顶部？

2 个答案: