?

1、二級菜單根據內容自適應寬度

---

?效果圖：

?

代碼：

li {white-space: nowrap;display: block;width: 100%; /* 寬度若固定，使用固定，但注意溢出問題 */ }

?

解析：

white-space: nowrap;? 重點使用這個，默認情況，內容會根據寬度自動換行。

?

?

---

?

2、字體若小于瀏覽器，例如 12px 時，想讓字體更小時該如何

效果圖：

?

代碼：

li{display:block;/*是塊級元素*/transform: scale(.5);/*縮小字體*/ }

?

如果文字被縮放后，未頂部對齊，可使用? transform-origin: 0 0； 頂部對齊。（像下面說的第3點中圖片下的文字）

?

?

?

---

??

3、一行中并排 li 時，內容不統一時，讓高度統一

效果圖對比：

錯誤示范	初步修改	最終需要的結果
? ?	?	? ?

?

代碼：

li{float: none;display: inline-block;vertical-align: top;
}

?

解析：

1、一般情況，并排塊元素使用的是 float:left ，但若出現各塊高度不統一時，則導致錯位情況，所以，需要清除浮動 float:none; ；

2、清除浮動后，通過使用 display:inline-block; 也是可以讓元素并排的，此時可能存在內容以基線對齊，即文字底線；

3、所以，需要使用 vertical-align:top; 將內容頂部對齊，這樣相對美觀點；

?

轉載于:https://www.cnblogs.com/JaneBlog/p/11283753.html

總結

以上是生活随笔為你收集整理的记录几个前端样式小点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。