每次用到了<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,其他的值,我一一尝试过了,效果都达不到我们想要的。

input元素和display:inline-block的元素不在一行的解决办法的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  3. CSS:在IE浏览器下,元素下沉一行的解决办法

    HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</spa ...

  4. 在写移动端时,a标签或者input标签等 在手机上点击背后会有阴影的解决办法

    a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了

  5. input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法

    <el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. BZOJ 3112 [Zjoi2013]防守战线 线性规划

    题意: 简单叙述: 一个长度为n的序列,在每一个点建塔的费用为Ci.有m个区间.每一个区间内至少有Dj个塔.求最小花费. 方法:线性规划 解析: 与上一题相似.相同使用对偶原理解题.解法不再赘述. 代 ...

  2. vuex3

    以下是一个表示“单向数据流”理念的极简示意: 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态. 来自不同视图的行为需要变更同一状态. 这就是 Vue ...

  3. CentOS7系统安装完MySQL后启动MySQL提示无服务

    重新安装MariaDB数据库即可解决,MySQL所有命令可通用 MariaDB MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,开发这个分支的原因之一是:甲骨文公司收购了My ...

  4. yum 命令讲解

    (一)yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定 ...

  5. (转载) 百度地图工具类封装(包括定位,附近、城市、范围poi检索,反地理编码)

    目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选      程序员8月书讯      项目管理+代码托管+文档协作,开发更流畅 百度地图工具类封装(包括定位,附近.城市.范围poi检索, ...

  6. 改变GridView中列的宽度

    <asp:TemplateField HeaderText="规格型号" HeaderStyle-Width="24%">

  7. 【参考】.class文件的JDK编译版本查看

    使用 UltraEdit  打开 .class 文件,第一行内容: 00000000h: CA FE BA BE 00 00 00 32 00 A9 07 00 02 01 00 37 ; 漱壕... ...

  8. maven/ssm框架搭建

    好久没有写java了,昨天学了下maven,不用手动的下载和添加jar包,实在是太方便. ------------------------------------------------------- ...

  9. css让背景颜色与背景图片同时显示

    background:url(../images/bg02.png) #25282e left top no-repeat;

  10. canvas处理图片

    canvas绘制图片的三种方法: drawImage(image, x, y) drawImage(image, x, y, width, height) drawImage(image, sourc ...