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

这是我的代码：为什么我的输入框与其父容器重叠？

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

我尝试使用的15px的填充在.createTodo-内，但我还是输入重叠有关吗？。

来源

2017-07-31 i am gpbaculio

输入与200+ .createTodo，里面填充15，然后重叠createTodo盒 –

@ÁlvaroTouzón感谢，我想它为200px，我如何工作的呢？ –

.createTodo-box {width：230px;}添加.createTodo的左右填充内部 –

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

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

来源

2017-07-31 08:46:22 JoseAPL

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

回答

相关问题