av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

css - input間的間距和文字上下居中

瀏覽:198日期:2022-11-16 13:07:58

問題描述

使用環境:debian8 + firefox-45.8 請看:

<p><input type='text' /><input type='submit' value='搜索' /> </p>css * { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }.left { width:420px;height:30px; }.search_btn { width:70px; height:30px; line-height:30px; }顯示效果

css - input間的間距和文字上下居中

這里有兩個問題:1。submit中的文字無法上下居中設置了vertical-align:middle;無法讓文字 “搜索”上下居中 “搜索”兩個字偏靠下

2。兩個input的間距問題有一種解釋,空格也占據空間。下面修改一個html結構,發現間距確實變小了一點,但是,為何仍舊沒有消失。

<p><input type='text' /><input type='submit' value='搜索' /> </p>

css不變,顯示效果如下:

css - input間的間距和文字上下居中為何還有間距?已經設置了padding:0px;margin:0px; ?

對input.left增加border ,將css修改為:

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }.left { width:420px;height:30px;border:1px solid red; }.search_btn { width:70px; height:30px; line-height:30px;}間隙還在。

css - input間的間距和文字上下居中

再對input.search_btn增加border

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }.left { width:420px;height:30px;border:1px solid red; }.search_btn { width:70px; height:30px; line-height:30px;border:1px solid red; }

間隙消失

css - input間的間距和文字上下居中

請:1。如何將文字上下居中

2。如何詳細解釋問題2??

問題解答

回答1:

文字沒有居中原因:因為box-sizing設置為border-box,所以height = 邊框 + 內邊距 + 內容區的高度,因為設置height為30px,邊框的默認寬度是middle,不同的瀏覽器具體用的像素值不一致,看下圖,firefox的middle用的是3px,所以內容區就剩下24px了;因為你設置行高為30px,所以如果你不設置height的話,自動計算的高度應該是30px + 3px + 3px = 36px,當你設置的高度小于36px的時候,下面超過的部分隱藏了,所以感覺像是沒有居中;你可以在瀏覽器中改變height的值查看效果;把.search-btn的line-height屬性去掉文字就居中了。

css - input間的間距和文字上下居中

對于行內元素來說,空白符會轉化為一個空格,因為在第一個p之后存在一個換行,換行符是空白符,所以轉化成了一個空格。改變html格式以后,還有間距,那可能是Firefox自己實現的button樣式,雖然有3px的邊框,但是看效果明顯邊框沒有那么粗,估計firefox實現的時候在周圍會有2px的透明邊框,然后是1px的實線框。當明確設置border的時候,按照你的實現,應該就可以覆蓋默認的邊框實現方式,所以就沒有間隙了。

標簽: CSS
相關文章:
主站蜘蛛池模板: 亚洲视频免费播放 | 97国产在线视频 | 亚洲精品www久久久久久广东 | 国产精品久久久久一区二区 | 99久久免费观看 | 欧美一区二区免费视频 | 日日天天| 91精品国产综合久久久久久蜜臀 | 国产一级视频在线 | 日日夜夜影院 | 成人区一区二区三区 | 精品免费国产一区二区三区 | 一区二区国产精品 | 欧美999 | www.色53色.com | 日本一区高清 | 亚洲国产精品一区 | 99re视频在线 | 国产欧美日韩综合精品一 | 国产精品永久在线观看 | 国产大片黄色 | 免费一级淫片aaa片毛片a级 | 九九热在线视频免费观看 | 亚洲欧洲精品一区 | 日韩一区二区在线观看视频 | www.日韩欧美| 国产一区二区影院 | 日韩中文字幕在线视频观看 | 成人午夜| 国产精品久久久久久亚洲调教 | 午夜精品三区 | 一区二区三区精品在线视频 | 国产精品无码久久久久 | 国产亚洲一区二区三区 | 免费视频一区 | 久久久久国产一级毛片 | 91视频国产一区 | 一级毛片免费完整视频 | 日韩免费电影 | av在线免费看网址 | 成人av网站在线观看 |