今天要做 這種效果
的圖。我是用span做的 圖文與圖文按鈕。因為行內元素沒有width與height，（雖然可以用padding撐大），本人更喜歡用width與height。於是用了display：inline-block將span變為行內塊級元素。之后兩個span之間出現了一些間距。谷歌了一下找到了一些方法。https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements這里提供了4種方法。我用了其中兩種可行，記錄一下，加強記憶吧。
1.對左邊的span加margin-right：-4px（原博客中說是2個inline-block之間的間距是4px）。可行。
2.對2個span的父盒子加font-size：0；再對這兩個span分別設置字號。可行。
再記錄一下今天遇到的一個問題：
一個大盒子div-parent與屏幕同寬，兩個子盒子：div-left與div-right，兩個子盒子按比例分父親的width，div-left左浮動，div-right右浮動。當瀏覽器頁面縮小之后，div-right掉下去了。掙扎了許久，給div-parent設置了min-width之后，就可以縮放瀏覽器頁面了。我也很奇怪，暫時還沒有找到滿意且理解的答案。后續更新。