關於又見絕對定位元素受限於父容器寬度的問題

2021-08-28 13:42:12 字數 786 閱讀 4712

再一次的發現了這個問題,無論是絕對定位元素還是浮動元素,他們有乙個特性:受限於父容器的寬度?

這是父容器li標籤

再來就是子容器了,在li標籤裡面套上了一層ul標籤,要做出效果,那麼使用了絕對定位?

預設寬度為3個子li標籤的寬度之和:

那麼開始操作了,給ul標籤新增padding或者margin都無所謂?

新增了padding-left:32px之後,ul標籤寬度應為192px(3個li標籤寬之和)+32px = 225px(ul為block元素,故可以如此加),但這裡卻正好等於221.19px,正好就是父容器的寬度。

果然,即使這些脫離了文件流的元素,某種程度上來說還是受限於他們的文件流父元素的。

但是有一點得說:即使這樣,這些元素也不見得能完全按照文件流的方式來操作,即使他們與文件流元素一樣(block元素自適應父容器寬度)

因此,要居中,得另想辦法,未完待續.......

工作小心得 關於絕對定位元素

先上 div style width 300px height 100px position relative background 0ff a href style position absolute display block top 0 left 0 bottom 0 right 50px b...

絕對定位元素的位置

1 開啟定位後 水平布局 left margin left border left padding left width padding right border right margin right right 包含快的內容區的寬度 當我們開啟了絕對定位後 水平方向的布局等式需要新增left 和 ...

絕對定位元素的居中實現

如果要問如何css實現絕對定位元素的居中效果,很多人心裡已經有答案了。相容性不錯的主流用法是 element 但,這種方法有乙個很明顯的不足,就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。此時,往往要借助js獲得。css3的興起,使得有了更好的解決方法,就是使用transform代...