Question

我正在构建一个React.js待办事项列表，看起来应该像这张图片上的那样：

这是我目前拥有的：

我尝试用float参数定位元素，但是它不起作用。

您能告诉我什么是错误并帮助解决吗？我添加了以下代码：

listItem.js：

return (
          <li className='list-item' onClick={() => {this.props.setActiveComment(); this.props.toggleHidden()}}>
            <h3>{this.props.item.title}</h3>
            <span>{this.props.item.commentsCount}</span>
            <button onClick={(event) => this.props.removeItem(this.props.id)}>Delete</button>
          </li>

listItem.css：

.list-item {
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F2F2F2;
    cursor: pointer;
    display: block;
}
.list-item button {
    width: 97px;
    height: 34px;
    border: 2px solid #FF3159;
    color: #FF3159;
    background-color: #fff;
    border-radius: 5px;
    float: right;
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: button;
    line-height: inherit;
    touch-action: manipulation;
    overflow: visible;
    text-transform: none;
    align-items: flex-start;
    text-align: center;
}
.list-item button:hover {
    background: #f44336;
    color: white;
    cursor: pointer;
}
.list-item h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    float: left;
}

.list-item span {
    width: 39px;
    height: 20px;
    background-color: #27CCC0;
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 20px;
    margin-left: 40px;
    padding: 3px 10px;
    border-radius: 10%;
    cursor: pointer;
}

App.js：

<div className='list-wrapper'>
            <h1>Items</h1>
            <ListInput inputText='' addItem={this.addItem}/>
            <ul>
              {
                this.state.items.map((item) => 
                (<ListItem 
                    item={item} 
                    key={item.id} 
                    id={item.id} 
                    removeItem={this.removeItem} 
                    setActiveComment={() => this.setState({ activeItem: item })} 
                    toggleHidden={() => this.setState({ isHidden: false })}
                  />
                ))
              }
            </ul>
          </div>

App.css：

.list-wrapper {
  margin: 40px 40px 20px 270px;
  width: 35%;
  padding: 20px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.39);
  -moz-box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.39);
  box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.39);
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border: 0px solid #000000;
  overflow-y: scroll;
}
.list-wrapper h1 {
  font-weight: normal;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 0px;
}

.flex-container {
  display: flex;
  align-items: flex-start;
}

Answer 1

物品在第二张图片中堆积的原因是由于使用了浮子。

使用浮点数会从常规文档流中删除一个项目，从而导致父元素的高度仅为其包含的非浮点项目的高度。在这种情况下，<span>元素。

如果父元素的浮动元素仅包含浮动元素，则其高度实际上会崩溃。如果父母不包含任何视觉上可察觉的背景，这并不总是很明显，但是要意识到这一点很重要。

如果您想了解有关浮动和陷阱的更多信息，请参阅Chris Coyier的CSS Tricks上的大量资源：https://css-tricks.com/all-about-floats/

我在下面创建了一个JS小提琴，并添加了一些浮动清除，这是从您发布的第一张图片中获得布局的最快方法。见下文：

https://jsfiddle.net/3hs6gxco/1/

虽然这将起作用，但这可能不是最好的方法。我看到您声明了一个名为flex-container的类，但是在您发布的示例中没有使用它。

这是另一个使用flexbox的示例，但总体来说使用了更少的CSS。

https://jsfiddle.net/a76ux58y/

希望这会有所帮助。

定位待办事项列表元素的问题

1 个答案: