Question

我有一个主container类，其中有两个容器。底部容器还包含两个容器，分别用于左侧textbox。我想用textarea填充这两个文本框，但是它不呈现。我需要对CSS进行哪些更改？

谢谢，这是我的代码：

App.js

class App extends React.Component {
  render() {
    return (
      <div className="screenDiv">
        <div className="topContainer">
          <div className="textContainer">
            <div className="textBoxes">
              <div className="leftTextBox">
                <textarea className="textarea" />
              </div>
              <div className="rightTextBox">
                <textarea className="textarea" />
              </div>
            </div>

            <div className="languageDisplay">
              <div className="inputLanguage">
                <p>English</p>
              </div>
              <div className="outputLanguage">
                <p>Spanish</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

App.css

.screenDiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.topContainer {
  height: 80%;
}

.botContainer {
  height: 20%;
  border-top: 1px solid black;
}

.topContainer,
.botContainer,
.textBoxes,
.languageDisplay {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.textBoxes {
  height: 50%;
  position: relative;
  top: 50%;
  border-top: 1px solid #161515;
  border-left: none;
  display: flex;
}

.textContainer {
  width: 80%;
  height: 36%;
  position: relative;
  top: 30%;
  left: 10%;
  right: 20%;
  border: 1px solid #161515;
  display: flex;
  justify-content: space-between;
  border-radius: 3%;
}

.languageDisplay {
  height: 50%;
  position: absolute;
  top: 0%;
  bottom: 50%;
  display: flex;
  justify-content: space-between;
}

.inputLanguage {
  width: 5%;
  height: 20%;
  position: relative;
  top: 30%;
  left: 20%;
}

.outputLanguage {
  width: 5%;
  height: 20%;
  position: relative;
  top: 30%;
  right: 20%;
}

.leftTextBox,
.rightTextBox {
  width: 50%;
  height: 100%;
  display: inline-block;
  border: 1px solid #100f0f;
  border-right: none;
  border-bottom: none;
}

.leftTextBox {
  border-left: none;
}

.textarea {
  height: 100%;
  width: 100%;
  resize: none;
}

Answer 1

您拼写错误的textarea。您写了texarea，但缺少第二个t。

文本区域未填写div

1 个答案: