span、input行内元素同行高度不一致

CSS垂直居中技巧

最新推荐文章于 2022-09-17 15:36:20 发布

原创最新推荐文章于 2022-09-17 15:36:20 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #行内元素 #span #input

html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用float、height和line-height属性实现文本和输入框垂直居中的CSS技巧。通过将这些属性应用于span和input元素，可以确保它们在页面上精确对齐。

用float、height、line-height解决

<span style="float:left;height:30px;line-height: 30px">名称：</span>
<input type="text" id="inputSth" style="float:left ;height: 30px;line-height: 30px">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

StudyHardcc

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

cyqzy的博客

07-09

8562

<div class="gdpy"> <span>用户名：</span> <input type="text" placeholder="请输入用户名"> </div>1. 效果图如下2. 出现的原因：以

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

anjiye7641的博客

10-17

868

input标签或收盘标签添加代码： vertical-align:top; 转载于:https://www.cnblogs.com/autoXingJY/p/9805480.html

参与评论您还未登录，请先登录后发表或查看评论

行级元素高度不一致，并列垂直居中，如span，和input

热门推荐

kongjiea笔记

10-13

1万+

行级元素高度不一致，并列垂直居中 .box {background: #999;} .box input{height:30px;line-height:30px;border:1px solid #999;vertical-align:middle;} aaaa sdfbb

input框前的词长度不同时，保持这些input框对齐

qq_68890717的博客

09-17

496

input框对齐

htmlinput是行内块元素吗

04-02

行内元素如span，不会换行，不能直接设置宽高；而行内块元素则结合了两者的特性，既可以设置宽高，又可以在同一行显示多个，比如img和input标签。接下来，查看用户提供的引用。引用[2]中提到：“行内块级元素，它...

HTML 行内元素与块级元素

weixin_42012282的博客

04-23

499

目录 1.HTML 行内元素与块级元素 2.常用的 display 值 3.行内元素和块级元素盒模型区别 4.块级元素与 overflow 5.实践 1.HTML 行内元素与块级元素行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和...

34. (多选题) 以下是行内块元素的是（）。 A input B img C div D span 35. (多选题) 以下是块级元素的是（）。 A h1_h6 B p C span D div E ul

09-26

而 span 是行内元素，行内元素一般不会独自占据一行，并且不能设置宽度和高度 [^1]。 ```html <!DOCTYPE html> , initial-scale=1.0"> /* 设置块级元素样式 */ .block { width: 200px; height: 100px; ...

testbox 是行内元素吗

最新发布

11-05

- `<input>`元素（包括type="text"）默认是行内块级（inline-block），即它不会独占一行，但可以设置宽度和高度。 - 但是，在CSS中，任何元素都可以通过设置`display`属性来改变其显示方式。因此，如果用户是指...

1、行内元素和块级元素的区别详细说明助于初学者学习理解

08-03

替换元素（如img, input等）虽然属于行内元素，但可以设置宽高，这是因为它们是替换元素[^4]。结构安排： 1. 引言：说明元素分类的重要性（参考引用[2]） 2. 块级元素详细说明（参考引用[1]） 3. 行内元素...

input宽度自适应（解决文字占位宽度不同所引起的问题）

T的博客

07-10

4319

问题描述： input在输入的时候，要能让input的宽度随着输入的文字自动增宽。思路1：获取文字的内容，然后通过文字.length * font-size计算文字的宽度，但是由于文字“i”与“中”显然占位宽度不同而引起宽度差思路：设置一个隐藏的span，使其font属性与input统一，然后获取span的宽度，赋值给input <!DOCTYPE html> <html lang="en"> <head> <meta chars..

关于span和input的vertical-align

carior的博客

09-21

2418

span默认为vertical-align: top; input默认为vertical-align: baseline; 想要清楚span之间的距离可以将span的父盒子设为font-size:0px;因为span和图片一样默认为文本。

两个行内元素的间隙问题

weixin_33729196的博客

08-28

635

1.两个input框因为都是行内块元素，所以有间隙问题，和无法对齐； .html 2.解决办法给 input 的父级盒子加 font-size：0；可解决input标签间的间隙问题；给 input 标签加vertical-align：middle；可解决无法对齐问题； .css 两个span间存在间隙？原因：span的行内元素，但是项目所需需要设成行内块元素，所...

img、input到底是行内还是块级元素？

weixin_30835933的博客

10-06

2376

一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和marginleft、right改变宽度。二、在文档类型定义（DTD）中对不同的元...

html替换和不可替换元素

linda_417的博客

07-20

1273

从元素本身的特点来讲，可以分为替换和不可替换元素。 1、替换元素替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 (X)HTML中的img、input、textarea、se

img,input是行内块之标签总结

qq_43184101的博客

05-22

1185

块，行内块，行内元素之小总结，不要在傻傻的分不清了

解决div与span等inline元素同行后高度不一致问题

little_newBee的博客

05-19

6587

这里场景是有一个div使用float，本来前面的span由于后面div的浮动被挤到了后面。这是因为浮动破坏了div的inline-box导致的。但是导致了，这两个元素的高度不一致的问题，并且无法用margin解决。即使用了vertical-align解决了小x的问题也没有什么反应，看来问题的原因不在这里，至于具体原因现在仍不是很清楚，网上找到了下面这样的代码得以解决。将div和span都table化

input标签行内式调用function时

MagicWing的博客

10-17

3790

input标签行内式调用function时，是先通过window调用function，所以打印this等于打印window，