带有react.js的css的STRANGE行为

Question

我的网络应用程序的行为真的很奇怪（对我而言）。 应用程序的模型是：

finish();

我在每个TaskElement下面都会出现奇怪的白色空白，如图片所示：

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

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

我不知道为什么会出现这种差距，但是当我将任何明文符号添加到xml呈现代码间隙DISAPPEAR时。那到底发生了什么？

差距消失了：

和。添加到代码这里：    回来（

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>
);

Answer 1

您的taskElement为inline-block，因此添加vertical-align: top应该可以解决问题。