为什么我的输入框与其父容器重叠？

Question

这是我的代码：

<section className="createTodo-box"> // parent
    <div className="createTodo-inside"> // child
       <Input
         value={this.state.text}
         style={{ width: '200px' }}
         onChange={(e) => this.setState({ text: e.target.value })}
         type='text'
         placeholder='What needs to be done?'
       />
     <Button onClick={() => this._confirm()} type="primary"> Create </Button>
   </div> 
</section>

我的css：

.createTodo-box {
    border: solid #C3C3C3 1px;
    width: 200px;
    margin: 25px;
    padding: 15px;
}
.createTodo-inside {
    padding: 15px;
}

我尝试在.createTodo里面使用15px的填充但我的输入仍然在右边重叠？ 。

Answer 1

那些发现这种重叠问题的新人，请始终记住，您必须在通用选择器 box-sizing: border-box; 或您希望最初防止重叠的任何地方应用 *{}。那么你应该做一些关于盒模型的研究。当您了解盒模型时，您就会得到答案。

Answer 2

如果.createTodo-inside类继承了width:100%，无论您的父级有多宽，您都需要将填充大小调整为父级width。您可以使用box-sizing：

来获取此行为

.createTodo-inside {
  padding: 15px;
  box-sizing: border-box;
}