span和input同一行布局的时候，高度偏移

最新推荐文章于 2022-01-12 20:47:27 发布
最新推荐文章于 2022-01-12 20:47:27 发布
阅读量8.3k 收藏 4
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyqzy/article/details/80973155
版权 
<!-- span和input布局高度偏移: 以文字为基线 -->
<div class="gdpy">
   <span>用户名：</span>
   <input type="text" placeholder="请输入用户名">
</div>


1. 效果图如下



2. 出现的原因：以文字基线对齐


3. 解决方式

（1）给其中人一个元素设置：vertical-align:top
（2）使用float浮动
（3）定位position


cyqzy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html实现span左浮动,span 右浮动折行 解决ie6/7中span右浮动折行问题
weixin_33823399的博客
06-19 1169
RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部标准参考W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落：A floated box is shifted to the left or right until its outer edge touches the conta...
如何用css进行网页布局,用CSS进行网页布局的教程
weixin_42423817的博客
08-04 2358
如果你是一个初学者那么学习css.html" target="_blank">css的第一步就是布局，但是实现网页布局的方法很多，很多初学者都不知道如何应用，那么现在就跟爱站小编去看看用CSS进行网页布局的教程。一、基础概念W3C标准：由万维网联盟制定的一系列标准：包括：结构化标准语言(HTML和XML)；表现标准语言(CSS)；行为标准语言(DOM和ECMAScript)。??倡导结构，样...
span、input行内元素同行高度不一致
irisrathem的博客
10-12 3468
用float、height、line-height解决 &lt;span style="float:left;height:30px;line-height: 30px"&gt;名称：&lt;/span&gt; &lt;input type="text" id="inputSth" style="float:left ;height: 30px;line-height: 30px"&a
span和input同一行布局的时候，高度偏移解决方案
anjiye7641的博客
10-17 810
input标签或收盘标签 添加代码： vertical-align:top; 转载于:https://www.cnblogs.com/autoXingJY/p/9805480.html
span内容过多和input同一行显示
weixin_43837268的博客
03-12 3770
1.HTML &lt;p class="h-35"&gt; &lt;span v-if='index!=14'&gt; &lt;span class="beforeinput"&gt;{{item}}&lt;/span&gt;&lt;el-input disabled v-model=tableData2[index]&gt;&lt;/el-input&gt;&am
自学js第十五天:event坐标偏移量位置和window对象
weixin_47592060的博客
05-07 1583
一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置 1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标 可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置) 2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
【css布局】传统布局详解梳理及原因分析
haibo_bear的博客
05-15 608
【css布局】布局详解梳理及原因分析 文章目录【css布局】布局详解梳理及原因分析前言零、块元素和行内元素一、水平布局和垂直布局1、div块元素布局详解1.1、垂直和水平布局1.2、水平居中和垂直居中 前言 本文基于vue绘制样式 零、块元素和行内元素 块级元素：块元素前后都不能有行内元素和文本节点。 <div>、<p>、<h1>...<h6&g...
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 513
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
span标签和input标签怎么设置在同一行
热门推荐
xinan_xin的博客
03-07 2万+
昨天正好碰到了这个问题，就此记录一下： 分别给span标签和input标签设置float:left，左浮；并且将span和input的height设置成一样，span的line-height也设置和height一样高，有个地方需要注意，input的width不能设置成100%，不然float：left不起作用了。 &lt;span style="float: left; height: 34...
input标签写CSS时需要注意的几点
思考者的LAMP技术博客
08-04 1006
飞鱼的声纳顶部的搜索框让我头疼了很长时间，原因是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，Firefox和IE中的高度始终不能一致；二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示，而是靠输
关于html的input按钮与input文本框的高度问题解析
qq_41823528的博客
10-16 1109
问：为什么input按钮的高度与input文本框的高度不一致？ 答：因为input按钮在高度与宽度计算上采用的是Quirks模式进行计算，也就是说input按钮的高度与宽度分别是包含了padding、border，而对于input文本框则采用的标准模式进行计算宽度与高度，也就是在css样式中设置width：50px,它的内容盒子宽度就是50px，同样对于高度也是如此. 但是对于input按钮的...
span标签在ios中错位 span标签位置下移异常
qq_39855581的博客
03-31 1179
场景：span标签在ios中出现错位，往下移了一部分. 安卓以及pc模拟均是正常的。 解决方案：加上vertical-align: top;即可
关于span和input的vertical-align
carior的博客
09-21 2303
span默认为vertical-align: top; input默认为vertical-align: baseline; 想要清楚span之间的距离 可以将span的父盒子设为font-size:0px;因为span和图片一样默认为文本。
前端问题记录篇（一）：input的高度问题
安之ccy的博客
03-31 318
给input设置高度，但是总是不精确，设置了42px，但实际却是47.97px 解决办法： 给文本宽设置：box-sizing: border-box;
html中注册界面input与span不在同一行
最新发布
05-24
要将HTML中的注册界面input与span放在同一行，可以使用CSS中的display属性和float属性来控制它们的排列方式。 例如，可以将input设置为inline-block元素，将span设置为inline元素，然后使用float将它们放在同一行。具体代码如下： HTML代码： ``` <form> <label>用户名：</label> <input type="text" name="username"> <span class="error">*请填写用户名</span> </form> ``` CSS代码： ``` form label { display: inline-block; width: 80px; text-align: right; } form input { display: inline-block; width: 200px; float: left; } form span.error { display: inline; color: red; float: left; } ``` 这里设置了label元素为inline-block元素，并且设置了一个固定的宽度和右对齐。input元素也设置为inline-block元素，并且设置了一个固定的宽度和左浮动。span元素则设置为inline元素，并且设置了左浮动和红色字体颜色。这样，label、input和span元素就可以在同一行并且对齐了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值