input的對齊問題

知更鳥
知更鳥
知更鳥
1528
文章
6915
評論
2013年9月2日16:06:57 評論 1.8K

1.INPUT和圖片按鈕對齊:

<form method="post" action="ccc.asp">
?<input type="text" name="title" onfocus="this.value=''" value="請輸入單詞">
?<input type=image src="https://ccc.cn/img/dict.gif" align="absmiddle">
</form>

?? 也可以在按鈕的樣式里面加入:vertical-align:middle;

2.INPUT和文字對齊

定義INPUT的樣式,input {vertical-align:middle;},這樣文字就會和INPUT框對齊。

3.以此類推,SELETE框等都如此

可以在全局CSS中定義:input,select{vertical-align:middle;} 省的后面麻煩。

4.去除鏈接的虛線框

a{

?? blr:expression_r(this.onFocus=this.blur());??

?? outline:none;??

}

a:focus{

?? -moz-outline-style: none;??

}

5.圖片定位

background-position


 

1.input文本框下移的方法:padding-top ,可以解決文本框向下移。

2.input文本框和button對齊可以給他們外面加table (例如,谷歌首頁)

3.表單和文字對齊可以設置父容器的字體為Tahoma

4.select, input,label,button{ vertical-align:middle; }(可以寫在頁面的最上面和*一樣,先規定好)

5.font-family:Arial,sans-serif,Tahoma; /*規定同一字體*/

font-size:12px; /*規定同一字體大小*/

height:25px; /*解決Safari和Chrome下的高度問題*/

line-height:15px; /*協調height,讓文字居中*/

overflow:visible; /*只有設置這個屬性IE下padding才能生效*/

padding:0 0.5em; /*chrome、ff默認值;調整其值,讓IE和其他瀏覽器的一樣*/

weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在構建網站時,使用 CSS 框架是一個實時的節省,因為它為您提供了每個網頁設計師和前端開發人員在制作網站時需要的工具。 CSS 框架是一個軟件框架,它允許使用 HTML/CSS 進行更簡單、更符合標準...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

設計響應式網頁,PC端和移動端的樣式兼容性,很讓人撓頭,最常見的就是文字垂直不居中,而且蘋果手機和安卓手機下表現也不盡相同,往往蘋果手機是垂直居中的,但在安卓機上字卻靠上了,總是差那么一像素,應該是安...
jQuery幻燈片插件:OWL Carousel Web前端

jQuery幻燈片插件:OWL Carousel

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件,它具有以下特點: 兼容所有瀏覽器 支持響應式 支持 CSS3 過度 支持觸摸事件 支持 JSON 及自定義 JSON 格式...
js實時獲取瀏覽器窗口大小 Web前端

js實時獲取瀏覽器窗口大小

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: