碰到一個導航文字設計成豎排的網站。

找了一些資料，css有屬性可以實現

writing-mode（設置對象書寫方向）

　　語法：writing-mode : lr-tb、tb-rl

　　參數：lr-tb：從左向右，從上往下 　tb-rl：從上往下，從右向左

可憐火狐不支持。

還有一些方法就閑的繁瑣。

我是個懶人。

找到一個小技巧，其實我們只需要把寬設置合適，文字自己就會豎排，對于不換行的情況下，就比如我需要做的導航，這個方法十分的那個啥。。。

寫個小小的例子：

<style type="text/css">
#menu li{
?? ?float:left;
?? ?list-style-type:none;
?? ?width:20px;}
#menu li a{
?? ?color:#006600;
?? ?text-decoration:none;}
#menu li a:visited{
?? ?color:#006600;
?? ?text-decoration:none;}
#menu li a:hover{
?? ?background-color:#003399;
?? ?color:#fff;
?? ?text-decoration:none;}
</style>
<ul id="menu">
?? ?<li><a href="#">與爾同銷萬古愁</a></li>
?? ?<li><a href="#">呼兒將出換美酒</a></li>
?? ?<li><a href="#">千金裘</a></li>
?? ?<li><a href="#">五花馬</a></li>
</ul>

?

轉載于:https://www.cnblogs.com/yaojing/archive/2010/11/26/1888584.html

總結

以上是生活随笔為你收集整理的导航文字竖排的全部內容，希望文章能夠幫你解決所遇到的問題。

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