input文本框在实践中遇到的对齐问题

最新推荐文章于 2023-11-16 14:55:51 发布

BJ_benjamin

最新推荐文章于 2023-11-16 14:55:51 发布

阅读量3.6k

点赞数

分类专栏：前端之webPageMaking

本文链接：https://blog.csdn.net/cuew1987/article/details/8767187

版权

本文探讨了在实践中HTML输入框(input)的对齐问题，通过代码示例展示了如何使用vertical-align属性进行调整。W3School解释了vertical-align属性的作用，它用于定义行内元素的基线垂直对齐。尽管大多数现代浏览器如IE8+、Firefox和Chrome对这个属性有良好支持，但在IE6、7下仍存在兼容性问题。

摘要由CSDN通过智能技术生成

直接上代码：

<style type="text/css">
	.wrap{ font-size:12px;font-family:Arial,'simsun'; background:#ccc; margin-bottom:5px; line-height:30px;}
	input { margin:0 5px 0 0 ; padding:0; vertical-align:middle }
	.txt{ padding:6px;}
	.label_a{ display:inline-block;}
</style>

HTML：

<div class="wrap">
	<input type="text" class="txt" />发大水了开发大路口附近dasdfadfadfa
</div>
<div class="wrap">
	<label for="radioA" class="label_a"><input type="radio" id="radioA" />发大水了开发大路口附近dasdfadfadfa</label>
</div>
<div class="wrap">
	<label for="checkboxA" class="label_a"&