span标签和input标签怎么设置在同一行

最新推荐文章于 2024-05-22 21:53:11 发布

原创最新推荐文章于 2024-05-22 21:53:11 发布 · 2.8w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#span和input框怎么设置为在同一行 #输入框前面的字体居中

本文介绍了一种使用CSS float属性和精确高度、宽度设置实现span和input元素并排显示的方法，同时指出了input宽度设置为100%时可能导致float失效的问题。

昨天正好碰到了这个问题，就此记录一下：

分别给span标签和input标签设置float:left，左浮；并且将span和input的height设置成一样，span的line-height也设置和height一样高，有个地方需要注意，input的width不能设置成100%，不然float：left不起作用了。

<span style="float: left; height: 34px; width: 50px; line-height: 34px;">标签：</span>
<input name="tag" style="width:calc(100% - 50px);resize:none; height: 34px; float: left"
       placeholder="统一标签(标签必须以 C_ 开头，不可包含空格和逗号)" maxlength="15">
<hr/>

最后效果如下：