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私有属性写 ...
随机推荐
- html5标签placeholder使用
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...
- jquery下 选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
- Python新手学习基础之初识python——与众不同1
Python是什么? 首先我们先简单介绍下python这门语言,Python是一种解释性的脚本语言,它不需要像C/C++那样先编译再执行,也不像JS那样可以在浏览器上直接执行.它为我们提供的基础代码库 ...
- Pythonic到底是什么玩意儿?
http://blog.csdn.net/gzlaiyonghao/article/details/2762251 作者:Martijn Faassen 译者:赖勇浩(http://blog.csdn ...
- 如何设置让外网通过路由器IP加端口号访问到局域网一台Web服务器
场景描述: 我们局域网内所有主机链接一台路由器,通过设置动态获取IP上网,现在想让一台主机作为Web 服务器,让外网用户通过http://ip:port的方式访问. 1:首先修改Apache的端口号: ...
- 转:Android模拟器连接电脑网络
原文地址:http://www.it165.net/pro/html/201212/4444.html 第一步: 在命令行(就是开始——运行——输入cmd)模式下输入adb shell命令一般会报两种 ...
- NOI2012 魔幻棋盘
http://www.lydsy.com/JudgeOnline/problem.php?id=2877 二维线段树. 好恶...... B类数据: 棋盘是一维的. 我们有一个结论: $gcd(a_{ ...
- 前端HTML与CSS编码规范
HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...
- Linux中输入命令按tab提示后会自动转义解决方案(xjl456852原创)
linux在命令行输入命令时,如果有$字符,按tab键时会自动在前面加入转义字符,反而达不到自己需要的效果. 例如: 在Centos7下,我要进入一个环境变量,并编辑一个文件: 比如我要进入$JAVA ...
- pyqt托盘例子
# -*- coding: cp936 -*- #!/usr/bin/env python # -*- coding:utf-8 -*- from PyQt4 import QtCore, QtGui ...