html - 适合文本区域

Question

我正在做一个元素，我希望网站上的用户能够将文本输入到 w3-cells 中。

我正在使用 w3 单元格，因为它们会自动改变形状以适合页面，但我在使 textArea 自动改变布局形状时遇到了问题。

在我看来，HTML 甚至没有被 CSS 更改，但我在我的代码中找不到任何错误:/。

注意:ideaText 的 textArea 的 CSS 工作正常；我的问题出在 bodyCells 上。

HTML:

<div id="top">
  <div id="idea">
    <textArea id="ideaText" placeholder="Introduce your topic here...">
    </textArea>
  </div>
  <div id="body">
    <div class="w3-cell-row" id="bodyCells">
      <div id="evidence1" class="w3-container w3-red w3-cell">
        <textArea placeholder = "Write some stuff...">
        </textArea>
      </div>
      <div id="evidence2" class="w3-container w3-green w3-cell">
        <textArea></textArea>
      </div>
      <div id="evidence3" class="w3-container w3-yellow w3-cell">
        <textArea></textArea>
      </div>
      <div id="evidence4" class="w3-container w3-blue w3-cell">
        <textArea></textArea>
      </div>
      <div id="evidence5" class="w3-container w3-purple w3-cell">
        <textArea></textArea>
      </div>
    </div>
  </div>

CSS:

#idea{
  background: #b35900;
  height: 150px;
}

textArea#ideaText{
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 150px;
  font-size: 28px;
}

textArea#bodyCells{
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 150px;
  font-size: 28px;
}

 .w3-cell-row#bodyCells{
   height: 150px;
 }

Answer 1

你有错误的 css 选择器，它不会“捕捉”你想要的 html 元素。没有 textArea#bodyCells在你的 html 中。 textArea#bodyCells搜索 <textArea id="bodyCells"> ，在您的 View 中不存在。这就是为什么看起来 css 对于该元素根本不起作用的原因。

顺便说一句，我建议你只在 css 选择器中使用类(没有 id)。更简单的选择器将更容易维护和开发。 :)