line-height下的dispay:inline-block垂直居中
html:
<div class="search fl">
<span class="search-box">
<input type="text" name="keyword" autocomplete="off" class="s-input" placeHolder="Search..."/>
<button class="s-btn">Search</button>
</span>
<i> </i><!-- 这个必不可少 -->
</div>
css：
.search{height: 100px;margin-left: 20px;}
.search-box{border: 1px solid #ccc; border-radius: 5px; display: inline-block;line-height:1px;}
.s-input{width: 340px;height: 23px;padding: 8px;outline: 0;border: 0;border-radius: 5px 0 0 5px;}
.s-btn{height: 40px;border: 0;width: 70px; border-radius: 0 5px 5px 0;}
line-height下的dispay:inline-block垂直居中的更多相关文章
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- MySQL在command line Client下的一些命令
MySQL在command line Client下的一些命令 通过CMD进入到本地数据库: mysql -h localhost -u -root -p 参数说明: -h 要连接的服务器的主机名或I ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- 为什么在默认情况下无法修改被block捕获的变量？ __block都做了什么？
默认情况下,block里面的变量,拷贝进去的是变量的值,而不是指向变量的内存的指针.使用__block修饰后的变量,拷贝到block里面的就是指向变量的指针,所以我们就可以修改变量的值.
- 解决Firefox下input button内文字垂直居中
众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写 ...
随机推荐
- jquery-multiselect在ie6里的一个bug
在使用jquery-multiselect(一个把下拉框改造成带checkbox的可以多选的控件)时,正常时应该是下面这样:而它在ie6里是下面这样: 其中第一个bug参考‘ie6里png图片不透明’ ...
- QQ联系客服
$('.side').bind('mouseenter mouseleave',function(e){ if(e.type=="mouseenter"){ if(!$(this) ...
- “声控”APP
“声控”APP 编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号ctriptech,获知更多一手干货. [携程技术微分享]是携程技术中心推出的线上公开分享 ...
- QT下实现对Linux Shell调用的几种方法
使用QProcess QThread ============================================ #include <QProcess>int main(){ ...
- QT中窗口刷新事件的学习总结
一．主要理解一下几个方法和属性: 1．QWidget * QScrollView::viewport () const 2．void QWidget::paintEvent ( QPaintEvent ...
- Java7新语法 －try-with-resources
http://docs.oracle.com/javase/7/docs/technotes/guides/language/try-with-resources.html The try-with- ...
- MySQL数学函数
官方文档:Numeric Functions and Operators Name Description ABS() Return the absolute value ACOS() Return ...
- java比较相等符
public class Test1 { /** * @param args */ public static void main(String[] args){ int a = 1000, b = ...
- Linux企业级项目实践之网络爬虫（18）——队列处理
所有的URL都接受管理,并在此进行流动.URL从管理模块的存储空间开始,一直到最后输出给磁盘上的URL索引,都由此部分调度.首先,给出URL调度的一般过程,如图所示.其流程的各个具体操作,后面详述.要 ...
- android真机调试
android开发可以使用google那个自带的模拟器来调试,不过那个模拟器启动实在太慢,太耗时了,不过,如果我们有android手机的话,我们可以直接在手机上调试,这样的话,速度就很快: 具体步骤如 ...