我也沒有想到,某一天,我竟然和legend標籤糾結起來了。css
我在codepen上寫了一個原始demo:chrome
http://codepen.io/myqianlan/pen/RPaxGJ瀏覽器
能夠看到,legend右對齊了,可是margin-right卻木有生效!測試
why? why? why?code
真是百思不得其解,因而進行了問題搜索,QQ羣求助,結果是彷佛沒人理我,或者理個人方式也不對,我想靜靜。element
靜靜也不能解決個人疑問呀。。只能繼續搜尋,找緣由。get
茫茫之中,一段文字引發了個人注意it
http://www.w3schools.com/tags/tag_legend.asp 最下面io
Default CSS Settings Most browsers will display the <legend> element with the following default values: Example legend { display: block; padding-left: 2px; padding-right: 2px; border: none; }
好的,大部分瀏覽器legend的默認樣式爲block!!!class
block爲啥能實現右對齊? block爲啥佔位跟inline-block同樣?我能將其重設爲inline嗎?一連串的問題,趕着讓我去本身測試。
測來又測去,發現了一個狀況:
legend標籤瀏覽器默認爲塊元素,而且CSS是不能修改其爲行內元素的(不一樣瀏覽器實現有差,但第一個legend均無論怎麼改,都是block),但其佔位卻跟inline-block同樣。chrome下其可以響應text-align,我認爲這是一個bug,是不標準的。
呵了個呵,這legend標籤究竟是個什麼鬼!
最後,若是要實現最初demo的效果,使用float吧。
關於這個問題,我爲啥會糾結這麼久,我只想說:我不是認真,我就是想知道爲何!