本文摘自PHP中文网,作者藏色散人,侵删。
css解决高度不一致的方法:1、给input加上“box-sizing: border-box;”;2、给button加上“box-sizing: content-box;”。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
css如何解决高度不一致问题?
css中input与button高度不一致的原因及解决方法
首先说下input和button高度不一致的原因
之前在学习react项目,写todolist的时候遇到了这样的小问题,查阅了一些资料 发现网上说什么的都有,五花八门,经过我查阅资料,发现对不齐是因为行内元素的基线是不同的,所以会导致高低不同。解决办法也很简单给每个元素加上 ↓ 就可以了。
1 2 3 4 5 6 7 8 9 10 11 | .target {
vertical-align:middle;
width: 200px;
height: 30px;
border: 1px solid #ccc;
box-sizing: border-box;}.red-btn {
vertical-align:middle;
width: 100px;
height: 30px;
background: lightcoral;
color: #fff;}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <Fragment>
<p className= "App" >
<p className= "App-header" >
<img src={logo} className= "App-logo" alt= "logo" />
</p>
<p>
<input className= 'target' value={this.state.inputValue} onChange={this.handleInputChange} />
<button className= 'red-btn' onClick={this.handleBtnClick}>add</button>
</p>
<ul>
{
this.getTodoItems()
} </ul>
</p>
</Fragment>
|
阅读剩余部分
相关阅读 >>
css怎么实现超出高度隐藏
网站对联广告js代码分享
css中font字体颜色怎么设置
css child选择器有哪些?
css border-bottom-color属性怎么用?
vue源码之目录结构的简单分析
css哪个样式不推荐使用
css怎么设置按钮样式
css的color属性有继承性吗?
css外链式和导入式的区别是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何解决高度不一致问题