当文本区域位于网格容器中时如何使 cols="" 工作答案

【问题标题】：How to make cols="" work when a textarea is in a grid container当文本区域位于网格容器中时如何使 cols="" 工作
【发布时间】：2019-09-19 18:07:34
【问题描述】：

当它们位于网格容器中时，Chrome 和 Firefox 似乎都不尊重 textarea 元素上的 cols 属性：

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

rows 属性得到了我所期望的尊重。

我需要一个texarea，当在一个网格容器中时尊重cols，如果cols不存在，则占用100%的可用宽度。

【问题讨论】：

标签： html css textarea css-grid

【解决方案1】：

你需要一个块元素父来修复它。

.grid {
  display: grid;
}

textarea:not([cols]) {
  width: 100%;
}

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <div>
    <textarea cols="10" rows="10">some dummy text</textarea>
  </div>
  <textarea>some other text</textarea>
</div>

【讨论】：

【解决方案2】：

这是一个对齐问题，使文本区域默认拉伸。您可以使用右侧的边距auto 修复此问题

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

textarea {
  margin-right:auto;
}

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

【讨论】：