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选择器，它不会抓住＆＃34;你想要的html元素。你的html中没有textArea#bodyCells。 textArea#bodyCells搜索<textArea id="bodyCells">，您在视图中不存在。这就是为什么css看起来根本不适用于那个元素。

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

Answer 2

这只是选择器顺序中的一个小错误。你打字的内容：

textArea#bodyCells{}

应该是什么：

#bodyCells textArea{}

Here's your code按照您的意愿工作...我希望。

：）

表格拟合TextArea

2 个答案: