Question

一个是标题，另一个是textarea。如果我不使用“display：inline-block”，它会将它们放在两条不同的行上，并且textarea会正确填充窗口的宽度，并在窗口大小发生变化时调整大小。但是，我希望它们是内联的，但是当我添加“display：inline-block”时，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

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

Answer 1

在这里，我添加了一个包含display: flex的包装，并将2：nd子项（最后div）设置为flex: 1，这使其填充剩余空间。

＆＃13;

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

＆＃13;

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

＆＃13;

如果div只是尝试对齐它们，那么你可以将它们全部放在一起

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

删除标题和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;
                               }

对齐标题和textarea内联但填充窗口宽度

2 个答案: