博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
input元素和display:inline-block的元素不在一行的解决办法
阅读量:6137 次
发布时间:2019-06-21

本文共 670 字,大约阅读时间需要 2 分钟。

每次用到了<input/> 元素 和inline-block的<span></span>(不一定是span,其他一些inline的元素也是一样)元素,他们总是会不在一个水平线上,这个时候就很蛋疼了,毕竟不在水平线上,很不美观。

有以下解决办法:

  1.  对于input和span都用浮动,这样就是平齐的,但是记得在外面清除浮动,避免对其他元素造成影响

  不加浮动时,可以通过截图发现,它是不再一条水平线上的,有错位的情况。

 

  在加了浮动后,情况如下图:

代码如下:

       

 2. 有的时候并不想用浮动解决,这时候可以用vertical-aline来实现。

  在W3School中,对于 vertical-aline 的介绍是:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

 布局           

给input加margin后,2个输入框的距离就可以拉开了,按照我们想要的进行设置。还有这个vertical-align必须加在span标签上。

如果说,你想将vertical-align加在input上,那么,你就必须进行如下的设置,才能达到你想要的效果:

布局还是没变,就是上面的图,只是css变一下

input框中间也有了距离,而且input和span也在同一水平线上            

其实也就是让行内元素变成行内块元素,并且加入了垂直对齐vertical-align:bottom,而且这里只能是bottom,其他的值,我一一尝试过了,效果都达不到我们想要的。

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/xiaqilin/p/6929586.html

你可能感兴趣的文章
SqlServer作业指定目标服务器
查看>>
UnrealEngine4.5 BluePrint初始化中遇到编译警告的解决办法
查看>>
User implements HttpSessionBindingListener
查看>>
抽象工厂方法
查看>>
ubuntu apt-get 安装 lnmp
查看>>
焊盘 往同一个方向增加 固定的长度方法 总结
查看>>
eclipse的maven、Scala环境搭建
查看>>
架构师之路(一)- 什么是软件架构
查看>>
jquery的冒泡和默认行为
查看>>
USACO 土地购买
查看>>
【原创】远景能源面试--一面
查看>>
B1010.一元多项式求导(25)
查看>>
10、程序员和编译器之间的关系
查看>>
前端学习之正则表达式
查看>>
配置 RAILS FOR JRUBY1.7.4
查看>>
AndroidStudio中导入SlidingMenu报错解决方案
查看>>
修改GRUB2背景图片
查看>>
Ajax异步
查看>>
好记性不如烂笔杆-android学习笔记<十六> switcher和gallery
查看>>
JAVA GC
查看>>