兩個行內塊元素都加上
vertical-align:top;這個跟基線對齊有關係，如果你給寫文字的那個span設定乙個vertical-align:top,就可以對齊，具體原因如下：
從css2的視覺化格式模型文件中可以看到：
inline-block的基線是正常流中最後乙個line box的基線，除非這個line box裡面既沒有line boxes或者本身overflow屬性的計算值不是visible，這種情況下基線是margin底邊緣。
舉例：
dib-baseline
因為前面的盒子沒有任何字元，此時它的基線就是它的底邊緣，後面的盒子有文字，所以該盒子的基線就是文字的基線，二者基線對齊，現成如此效果。
如果把第二個盒子line-height:0，此時文字基線的位置，就是文字的垂直中心，所以：
這就是為什麼出現這個問題的原因，通過改變對齊方式可以達到對齊。
具體關於vertical-align的講解可以看看張鑫旭老師的css深入理解之vertical-align
css基礎 行內 快級元素
塊級元素 1.獨佔一行 2.可以設定margin padding 3.預設寬度width是父級元素的百分之百 4.快級元素裡可以放快級元素和行內元素 文字類的標籤內不能使用快元素 1.一行可以顯示多個 2.width height設定無效 3,width預設內容寬度 4.行內元素裡只能放文字或者其他...
塊級元素上下左右居中的兩個小技巧
之前寫居中一般都是margin atuto要麼就是彈性盒子，不得不說彈性盒子確實好用。不過今天就記錄一下另外兩種的居中方式。我們都知道元素居中有一種方式就是設定定位後left 50 然後transform translatex 50 這種方法也是比較常用的一種。但是今天講的居中方式和這個有點出入但是...
兩個列表中元素比較
rules 模擬 確保每位使用者的使用者名稱都有獨一無二的方式 1.建立乙個當前使用者名稱列表current users 2.建立乙個新的使用者名稱列表new users，確保其中有一兩個使用者名稱也包含在 current users中 3.遍歷列表new users，對於其中每個使用者名稱，都檢查...