javascript - 我在向 CSS 中的文本框添加文本时遇到问题

Question

我正在尝试创建一个简单的文本框，其中包含文本。我在网上看过，但对我没有任何帮助。这是我的 TextBox.css 文件

div.TextBox {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

.TextBox-input {}

这是我的 TextBox.js 文件

import React, { PropTypes } from 'react';
import withStyles from '../../decorators/withStyles';
import styles from './TextBox.css';

@withStyles(styles)
class TextBox {

  static propTypes = {
    maxLines: PropTypes.number
  };

  static defaultProps = {
    maxLines: 1
  };

  render() {
    return (
      <div className="TextBox">
        {this.props.maxLines > 1 ?
          <textarea {...this.props} className="TextBox-input" ref="input" key="input" rows={this.props.maxLines} /> :
          <input {...this.props} className="TextBox-input" ref="input" key="input" />}
      </div>
    );
  }

}

export default TextBox;

Answer 1

您的 CSS 有点失控。由于某种原因，您指定了两次 position ，我不太清楚您要完成什么。能详细说说吗？

无论如何，我认为您的问题是您使用的是 position: absolute，并且您没有指定宽度或高度。尝试添加 width: 100%、height: 100%，您至少应该在屏幕上看到一些东西。

您并不总是需要宽度和高度，但由于绝对定位会将元素从页面的正常流中移除，因此浏览器需要了解在何处绘制它。有时您希望元素占据所有可用空间，您可以通过将所有四个边指定为 0 来实现这一点，以便“拉伸(stretch)”元素:

top: 0;
bottom: 0;
left: 0;
right: 0;