对齐 header 和 textarea 内联但填充 window 宽度

Question

一个是header，另一个是textarea。如果我不使用 "display: inline-block"，它会将它们放在 2 个单独的行上，并且文本区域会正确填充 window 的宽度，并在 window 大小发生变化时调整大小。但是，我希望它们是内联的，但是当我添加 "display: inline-block" 时，文本区域不再填充到页面宽度。

这是我目前拥有的代码。

<div style="display: inline-block" id="element1">
    <h4>Description</h4>
</div>
    
<div style="display: inline-block; vertical-align: text-top;" id="element2">
    <textarea rows="4" cols="50" readonly="readonly" style="width:100%">body</textarea>
</div>

这是它生成的屏幕截图。 Current Code Screenshot

如有任何帮助，我们将不胜感激。谢谢

Answer 1

这里我添加了一个包含 display: flex 的包装器并将 2:nd child（最后一个 div）设置为 flex: 1，这使得它填充了剩余的space.

.wrapper {
  display: flex;
}
.wrapper div:first-child {
  font-weight: bold;
}
.wrapper div:last-child {
  flex: 1;
  padding-left: 5px;
}
.wrapper div:last-child textarea {
  width: 100%;
}

<div class="wrapper">
  <div id="element1">
    Description
  </div>
  <div id="element2">
    <textarea rows="4" readonly="readonly">body</textarea>
  </div>
</div>

如果 div 只是为了让它们对齐，您可以将它们放在一起

.wrapper {
  display: flex;
}
.wrapper span {
  font-weight: bold;
}
.wrapper textarea {
  flex: 1;
  margin-left: 5px;
}

<div class="wrapper">
  <span>Description</span>
  <textarea rows="4" readonly="readonly">body</textarea>
</div>

Answer 2

删除你的header和div，然后将外部 css 添加到您的 textarea

div{
      display:block;
      margin:auto;
      position:static;
      }

 textarea{
                 box-sizing:border-box;
                 display:block;
                 margin:auto;
                 width:100%;
                 }
  textarea::before{
                                content:"Description";
                                vertical-align:top;
                               }

对齐 header 和 textarea 内联但填充 window 宽度

Align header and textarea inline but fill window width

html

css

textarea

alignment