css与react.js的奇怪行为

我面对我的web应用程序的真正奇怪（对我）行为。应用程序的型号是：css与react.js的奇怪行为

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

，我得到各个TaskElement下奇怪的白色间隙喜欢上图：

任务元素渲染中的代码的反应是：

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呈现代码差距DISAPPEAR。那里发生了什么？

前的差距消失：

和。加入到这里的代码：回报（

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

来源

2016-01-23 Syberic

介意分享您的样式:)你想要哪些 –

@MichelleTilley。？所有的代码都在https://github.com/feijihn/todolist_react，如果你想探索一些萤火虫，你也可以去84.23.33.186:3000 – Syberic

请帮助我们在你的html样本中的类的样式，所以我们不不需要扫描所有的CSS。 – LGSon

你taskElement是inline-block因此增加vertical-align: top它应该做的伎俩

来源

2016-01-23 21:42:28 LGSon

它做到了！我将不胜感激任何解释，因为我仍然不明白这些差距的起源 – Syberic

本文很好地描述它：https://css-tricks.com/fighting-the-space-between-inline-block-元/ – LGSon

css与react.js的奇怪行为

回答

相关问题