ul的li float後居中的問題

2021-08-07 06:41:54 字數 512 閱讀 7686

ul li 水平排列並居中是乙個常常會遇到的布局。

經常作為選單欄、導航欄、tap標籤欄等等。

雖然li float可以實現,但都比較麻煩,並且因為浮動了稍有不注意可能會影響布局,所以今天介紹個比較簡單的方法。

display:inline-block 方法

將li display:inline-block, 並且在ul 上用text-align 既可以實現水平排列並居中。

/* css */

* #div1

#div1,#div1

ul #div1

ulli

/* html*/

id="div1">

style="background-color:#eee;">

首頁li>

導航li>

詳情li>

ul>

div>

怎樣讓不設寬度的ul居中

簡單的方法必須是給ul設定乙個寬度,然後margin 0 auto 但如果你非要不給他寬度的話就是給外面的div設定position relative,然後給ul設定position absolute left 50 top 0 margin left x,這裡的x是乙個值,假如你的ul是乙個固定的...

HTML CSS解決ul和li的錯位 換行問題

這篇部落格主要是講如何解決ul和li的一些問題,作為乙個css大白,作者最近再做乙個非常簡單的導航欄 乙個ul中套4個li,一行 的時候遇到了很多問題。下面將一一講述。問題如下 1.ul中的li如何橫向排序?2.display inline inline block block有什麼區別?3.為何分...

換行後居中顯示的textview

staticlayoutpublic class centertext extends textview override protected void onsizechanged int w,int h,int oldw,int oldh staticlayout 傳入 需要分行的字串 畫筆 寬度...