inline block實現元素水平居中

2021-07-04 03:18:48 字數 742 閱讀 9601

僅inline-block屬性是無法讓元素水平居中,他的關鍵之處要在元素的父容器中設定text-align的屬性為「center」,

lang="en">

charset="utf-8">

documenttitle>

type="text/css">*ul

ulli

style>

head>

item1li>

item2li>

item3li>

item4li>

item5li>

ul>

body>

html>

上面的demo效果,明顯的可以看出,在inline-block的元素之間存在「4px」的空白,如何解決呢?

放在一行中。

item1li>

item2li>

item3li>

item4li>

item5li>

ul>

2、全相容的樣式解決方法

經過高人指點,使用純css還是找到了相容的方法,就是在父元素中設定font-size:0,用來相容chrome,而使用letter-space:-n px來相容safari。

.finally-solve

.finally-solve

li

去除inline block元素間距

現象 當使用inline block的時候,元素間會出現4px的間距 在chrome裡面 是8px 如下圖 原因 元素間留白間距出現的原因就是標籤段之間的空格 解決方法一 既然間距是因為標籤間的空格造成的,那麼消除空格就可以消除間距,但是這一類方法都不符合常規的 書寫習慣,所以 不推薦春天 夏天秋天...

去掉inline block元素間隙

目錄 1 標籤寫在一行,移除標籤間的空格 2 利用html注釋標籤 3 在父容器上使用font size 0 可以消除間隙 做頁面時,如果用到inline block元素來布局,就無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。我...

inline block元素間隙處理

要使多個塊級元素並行顯示,可使用float或者inline block進行處理 使用inline block會出現元素之間的間隙 div class demo p 我是乙個span p p 我是乙個span p p 我是乙個span p p 我是乙個span p div demo span 如圖 間...