对齐标题和文本区域内联但填充窗口宽度答案

【问题标题】：Align header and textarea inline but fill window width对齐标题和文本区域内联但填充窗口宽度
【发布时间】：2016-07-26 20:14:01
【问题描述】：

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

这是我目前拥有的代码。

<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

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： html css alignment textarea

【解决方案1】：

在这里，我添加了一个具有display: flex 的包装器，并将第二个孩子（最后一个div）设置为flex: 1，这使它填充了剩余的空间。

.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>

【讨论】：

谢谢！这正是我一直在寻找的。span>

【解决方案2】：

删除您的标题和 div，然后将外部 css 添加到您的文本区域

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;
                               }

【讨论】：