CSS讓同一行文字和輸入框對齊
大家都知道有時候一個文字輸入框和一段文字在同一行上顯示,然而它們總不是垂直居中,看上去不美觀,這段CSS程式碼就是解決這一問題的,上邊一行是沒有定義,下邊一行是定義過的,可以看出有明顯的差別。
<!–CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt–>
<html>
<head>
<title>CSS讓同一行文字和輸入框對齊</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>
相關文章
- 如何讓input文字框和圖片對齊
- 如何讓文字垂直居中對齊文字框
- CSS文字框與驗證碼垂直對齊CSS
- 實現文字標題和input文字框垂直居中對齊
- 如何讓文字居右對齊,換行後又居左對齊
- css文字兩端對齊CSS
- <input>文字框和驗證碼圖片垂直對齊
- 文字框與文字垂直對齊程式碼例項
- CSS文字水平居中對齊CSS
- input只能輸入文字框
- shell中輸入字串和文字在同一行字串
- 【小技巧】CSS文字兩端對齊CSS
- 文字框輸入文字倒計詳解
- JavaScript 文字框只能輸入數字JavaScript
- JavaScript 文字框輸入內容同步JavaScript
- jQuery文字框輸入內容同步jQuery
- javascript限制文字框輸入長度JavaScript
- JS 文字輸入框放大鏡效果JS
- 文字框只能輸入數字 javascriptJavaScript
- 文字框限制輸入字數的JSJS
- 文字框只能輸入數字程式碼
- jQuery文字框內容輸入同步功能jQuery
- js規定文字框只能夠輸入字母和數字JS
- 文字對齊位置
- input文字框和img圖片能夠垂直居中對齊程式碼例項
- CSS 行內對齊的黑魔法CSS
- C# 的輸入輸出,(同一行/換行)C#
- Axure之解決文字框無法輸入
- 限定文字框輸入字串長度程式碼字串
- Objective-C:多行文字輸入框(UITextView)ObjectUITextView
- javascript規定文字框不能夠輸入空格JavaScript
- jQuery限制文字框輸入長度詳解jQuery
- iOS 文字輸入框隨鍵盤上移iOS
- iOS上如何讓按鈕文字左對齊問題iOS
- css文字兩端對齊效果相容各瀏覽器CSS瀏覽器
- CSS 文字框圓角CSS
- C# Winform 支援Hex與ASCII輸入和切換的文字框C#ORMASCII
- Web聊天工具的富文字輸入框Web