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
相關文章:
主站蜘蛛池模板: 精品国产乱码久久久久久果冻传媒 | 99热99| 国产精品一区二区无线 | h在线观看 | 涩涩导航| 国产精品久久久久久238 | 亚洲精品乱码久久久久久蜜桃 | 欧美日韩亚洲在线 | 中文字幕日韩在线 | 男女搞网站 | 日韩在线视频免费观看 | 荷兰欧美一级毛片 | 一区二区三区在线免费观看 | 日韩电影中文字幕在线观看 | 亚洲欧美中文日韩在线v日本 | 亚洲国产aⅴ精品 | 国产欧美一区二区三区在线看 | 日日欧美 | 午夜av电影 | 日本欧美在线观看视频 | 日韩精品人成在线播放 | 中文字幕国产在线 | 国产精品乱码一区二区三区 | 久草视频在线播放 | 精久久| 伊人中文字幕 | 亚洲丝袜天堂 | 国产成人精品一区二区三区在线 | 久久久福利| 欧美一级片中文字幕 | 91视频免费| 激情的网站 | 亚洲天堂中文字幕 | 国产欧美日韩精品在线观看 | 久久久国产精品视频 | 亚洲国产精品一区二区www | 91麻豆精品国产91久久久久久 | 亚洲精品视频网站在线观看 | 国产乱码精品1区2区3区 | 日韩中文一区二区三区 | 国产乱码精品一品二品 |