CSS實(shí)現(xiàn)讓同一行文字和輸入框?qū)R的方法
發(fā)布時(shí)間：2015-05-12 17:59:22 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了CSS實(shí)現(xiàn)讓同一行文字和輸入框?qū)R的方法,涉及css中vertical-align屬性的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了CSS實(shí)現(xiàn)讓同一行文字和輸入框?qū)R的方法。分享給大家供大家參考。具體分析如下：
大家都知道有時(shí)候一個(gè)文本輸入框和一段文字在同一行上顯示，然而它們總不是垂直居中，看上去不美觀，這段CSS代碼就是解決這一問題的，上邊一行是沒有定義，下邊一行是定義過的，可以看出有明顯的差別。
復(fù)制代碼
代碼如下:<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->
<html>
<head>
<title>CSS讓同一行文字和輸入框?qū)R</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#a {
height:30px;
border:1px solid #ccc;
}
#b {
margin-top:20px;
height:30px;
border:1px solid #ccc;
}
#a input {
width:200px;
height:30px;
border:1px solid red;
}
#b input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="a"><input />Text1</div>
<div id="b"><input />Text2</div>
</body>
</html>
希望本文所述對大家的div+css網(wǎng)頁設(shè)計(jì)有所幫助。
相關(guān)文章
CSS實(shí)現(xiàn)帶箭頭的提示框效果【示例代碼】
我們在很多UI框架中看到帶箭頭的提示框，感覺挺漂亮，今天小編通過實(shí)例代碼給大家介紹CSS實(shí)現(xiàn)帶箭頭的提示框效果，感興趣的朋友一起看看吧2019-10-15
純css實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)
這篇文章主要介紹了純css實(shí)現(xiàn)輸入框placeholder動(dòng)效及輸入校驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2019-09-02
CSS使用placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果
這篇文章主要介紹了CSS使用placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果,需要的朋友可以參考下2019-06-12CSS實(shí)現(xiàn)輸入框的周圍高亮效果讓邊框發(fā)亮
在輸入框周圍出現(xiàn)了亮光，或者說陰影造成邊框發(fā)亮的假象，這就是我所說的高亮效果，要實(shí)現(xiàn)也不難，看看下面的示例就知道了2014-09-05
CSS實(shí)現(xiàn) Google Material Design 文本輸入框風(fēng)格(推薦)
這篇文章主要介紹了CSS實(shí)現(xiàn) Google Material Design 文本輸入框風(fēng)格的相關(guān)資料,需要的朋友可以參考下2019-10-23
