【css】文本框组合 box-sizing的一些用法

最新推荐文章于 2023-04-06 16:26:40 发布

原创最新推荐文章于 2023-04-06 16:26:40 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种将两个文本框组合并在外部统一绘制边框的方法。通过设置最外层容器的边框，并利用box-sizing属性使内部文本框继承边框样式，解决了边框重叠问题。具体实现中，使用border-left或border-right来调整边框，确保了整体布局的美观性和实用性。

1. 两个文本框打组合需要画边框

最外层的容器画好边框，里边文本框的边框可box-sizing：boder-box进行继承使用，边框重叠的问题便使用boder-left或者boder-right进行设置。

<div style="height:50px;width:250px;position: relative;border:1px solid red;">
			<input type="text" style="width:70%;height:100%;box-sizing: border-box; float:left;" />
			<input type="button" style="width:29%;height:100%;box-sizing: border-box;border-left:1px solid red;float:left;" />
		</div>