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私有属性写 ...
随机推荐
- 面向对象重写(override)与重载(overload)区别---转载“竹木人”
一.重写(override) override是重写(覆盖)了一个方法,以实现不同的功能.一般是用于子类在继承父类时,重写(重新实现)父类中的方法. 重写(覆盖)的规则: 1.重写方法的参数列表必须完 ...
- 3月23日html(五) 格式与布局练习:360浏览器布局
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...
- Android-transulcent-status-bar
最近业务上看到一个设计图挺好看,所以研究了一下透明状态栏,注意不是沉浸式状态栏,在参考了网上的一些资料后,整理出了这篇博客. Github Demo 链接: StatusBarCompat 参考文章: ...
- 为什么ELF文件的加载地址是0x8048000
在一个进程的虚拟地址空间中,ELF文件是从0x8048000这个地址开始加载的,为什么会是这个地址? 回答:用命令ld --verbose可以看到0x08048000,ld的默认脚本用这个地址作为EL ...
- iOS界面调试工具 Reveal-备用
Reveal是一个iOS程序界面调试工具.使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面. 对于动态或复杂的交互界面,手写UI是不可避免的.通过Reveal,我们可以方便地调试 ...
- android:layout_weight属性的简单使用
效果: style.xml <style name="etStyle2"> <item name="android:layout_width" ...
- Linux企业级项目实践之网络爬虫(15)——区分文本文件和二进制文件
HTTP协议支持文本和二进制文件传输.最常见的html格式的页面即文本,图片.音乐等为二进制文件.我们要对这两类文件加以区分并分别处理. static char * BIN_SUFFIXES = &q ...
- 一位搬家师傅的O2O之旅
一位搬家师傅的O2O之旅 By 诸神之黄昏 | 2014/08/14 [核心提示] 一位普通的搬家师傅,无意中被卷入如火如荼的 O2O 浪潮,起初,互联网让他尝到了甜头,后来则是更多的困惑和不解. 再 ...
- Android Animations简介
一 .Animations简介 Animations提供了一系列的动画效果,这些效果可以应用于绝大多数的控件: 二.Animations的分类 第一类:TweenedAnimations,该类Anim ...
- 【转】FLV视频封装格式详解
Overview Flash Video(简称FLV),是一种流行的网络格式.目前国内外大部分视频分享网站都是采用的这种格式. File Structure 从整个文件上开看,FLV是由The FLV ...