input元素和display:inline-block的元素不在一行的解决办法
每次用到了<input/> 元素 和inline-block的<span></span>(不一定是span,其他一些inline的元素也是一样)元素,他们总是会不在一个水平线上,这个时候就很蛋疼了,毕竟不在水平线上,很不美观。
有以下解决办法:
- 对于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的元素不在一行的解决办法的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- CSS:在IE浏览器下,元素下沉一行的解决办法
HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</spa ...
- 在写移动端时,a标签或者input标签等 在手机上点击背后会有阴影的解决办法
a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了
- input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法
<el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- 安全风控的CAP原理和BASE思想
CAP原理最多实现两个,需要牺牲一个来满足其他两个:
- 实现 jstl标签foreach 功能
jsp 页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- WAP 图片 lazyload
原理是根据屏幕上的坐标找到需要做 lazyload 的区域 1,先监听 scroll 事件 ,scrolling_lt window.addEventListener('scroll', functi ...
- 单片机: EEPROM和串口通信
名称:IIC协议 EEPROM24c02 通过串口通信存数读取数据 内容:此程序用于检測EEPROM性能,測试方法例如以下:写入24c02一个数据,然后在内存中改变这些数据. 掉电后主内存将失去这些信 ...
- Xshell dns tunnel攻击
该域名还会向多个超长域名做渗出,且域名采用了 DGA 生成算法,通过 DNS 解析时渗出数据. 部分生成域名如下: sajajlyoogrmkjlkmosbxowcrmwlvajdkbtbjoylyp ...
- 14.boost最小生成树 kruskal_min_spainning_tree
#include <iostream> #include <boost/config.hpp> //图(矩阵实现) #include <boost/graph/adjac ...
- xBIM 实战04 在WinForm窗体中实现IFC模型的加载与浏览
系列目录 [已更新最新开发文章,点击查看详细] WPF底层使用 DirectX 进行图形渲染.DirectX 能理解可由显卡直接渲染的高层元素,如纹理和渐变,所以 DirectX 效率更高. ...
- luogu 2679 子串
子串 史上最简短的一篇博客,毕竟看题解ac心疼我的kmp /* f[i][j][k][0/1]表示A的前i个,B的前j个,用到了k个子串,当前字符选或者不选. 所以f[0][0][0][0]的方案数为 ...
- BOOL的getter方法
在代码中经常会看到这样的属性声明 @property (nonatomic,assign,getter = isRead)BOOL read; 这行代码的意思就是,声明一个BOOL类型的read,但是 ...
- POJ 2188线段树求逆序对
题目给的输入是大坑,算法倒是很简单-- 输入的是绳子的编号wire ID,而不是上(或下)挂钩对应下(或上)挂钩的编号. 所以要转换编号,转换成挂钩的顺序,然后再求逆序数. 知道了这个以后直接乱搞就可 ...