li的排列 inline block的應用

2021-06-22 06:45:02 字數 566 閱讀 9707

有的時候在布局的時候要實現這樣的效果,外面乙個容器,之所以加邊框是為了看的清楚,裡面是8個小盒子,每個盒子的橫向間距是40px,縱向間距是20px

在以前的時候,我們可以用浮動來做,但是鄙人真的很鄙視浮動,這個屬性造成一大堆的負面效果,所以鄙人今天用了另外乙個小方法來實現。8個小盒子都

是ul的li,但是我們把他們的display改變一下,就是inline-block。

廢話不多說,上**

關於inline-block,我真的很喜歡它。

每個li的寬度是100,100*4=400,  400+3*40=520,   520就是box的寬度,我們希望是這樣。

但是,每個li的寬度是100,margin-right是40,每行4個,應該是100*4+40*4=560,多出來的這個560-520=40怎麼辦,這個要把ul的margin-right設定成-40,話說把margin設定成負數這個好神奇的說,鄙人也是剛剛接觸。

CSS的ul和li實現橫向排列和去掉li的點

今天做網頁是老是不懂怎麼實現ul的橫向排列和去掉li那個煩人的點,現在找到方法了,做個筆記 複製 如下 ul ul li 順便拓展一下li的list style 複製 如下 ul 程式設計客棧 ul ol ol 再寫個今天看到的東西,是關於dl,dt,dd的,其實就是類似於子類的,我比較少見到各個網...

關於li的排列,我的面試題

1.flex布局,其實在移動端最合適的就是彈性布局,在移動端上解決問題使用flex最為合適,也很方便 warp如果div過多,felx屬性 flex wrap預設屬性nowrap,是不會換行的,只能預設的等比例壓縮素有的div,我們把flex wrap設定為wrap就可以換行 當然除了從左到右,fl...

css如何實現ul和li橫向排列

因為li是塊級元素,預設佔一行的,要想實現橫向排列,一般通過以下兩個方法 float left這樣設定有乙個問題,li浮動以後則脫離了文字流,即不佔位置,如果它的父級元素有具體的樣式且沒有固定寬高,建議父元素清除浮動,或者設定固定寬高。display inline block即把li變為行內元素且可...