用react.js实现css的奇怪行为

Question

我面对的是我的网络应用程序的奇怪行为。app的模型如下：

|-TaskBox
  \
   |-TaskList
     \
      |-TaskElement
      |-TaskElement
  \
   |-AddNewTask

在每个TaskElement下面，我得到了奇怪的白色空白，如图中所示：

​

​

react中的任务元素呈现的代码是：

return (
    <div className="taskElement" style={this.state.style}>
        <div className="textArea">
            <p>{this.state.text}</p>
        </div>
        <div className="iconsArea">
            <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
            <i className="material-icons" onClick={this.Delete}>delete</i>
            <i className="material-icons">keyboard_arrow_down</i>
            <i className="material-icons">keyboard_arrow_up</i>
        </div> 
     </div>
);

我不知道为什么会出现这种空白，但是当我向xml添加任何明文符号时，代码空白就会消失。那里到底发生了什么？

差距消失：

​

还有那个。添加到这里的代码:返回(

<div className="taskElement" style={this.state.style}>
            <div className="textArea">
                <p>{this.state.text}</p>
            </div>
            <div className="iconsArea">
                <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
                <i className="material-icons" onClick={this.Delete}>delete</i>
                <i className="material-icons">keyboard_arrow_down</i>
                <i className="material-icons">keyboard_arrow_up</i>
       </div> .  (this is the dot i added)
       </div>
    );

Answer 1

您的taskElement是inline-block，因此将vertical-align: top添加到它中应该可以做到这一点。