CSS按比例等分box,並顯示分隔線

2021-07-08 10:01:55 字數 861 閱讀 6135

**如下:

css code:

ul ul li

實現的效果為

ok,that's so easy!,這樣我就可以三等分了,可是各位看官,如果你細心的情況下,你會發現,現在導航都會加些分隔,有同學這樣說了,既然等分都沒有一點問題,加分隔就加乙個右邊框不就可以了嗎?ok,你說的沒有錯,這樣想就成功了50%,我們就按他所說的,來演示一下效果:

啊,大事不好了,怎麼第三項都被撐破了,自動換行了,我們完美的導航出現了問題,這樣的效果我相信,沒有人會覺得這是正常的,原來我們在加border-right:1px solid #ccc;時,會自動為li增加1px,最後我們的總寬度為33.33*3+3>100,總寬度早已經不是100了,他們一起把ul撐破了,出現這樣的情況與以前的html制定的標準有關,現在html 5橫空出世,媽媽再不擔心我找不到家了。html 5引入了新的屬性 box-sizing,當你設定乙個元素為box-sizing: border-box;時,此元素的內邊距和邊框不再會增加它的寬度。如果寬度不增加,我們當然不擔心被撐破呀,於是我們趕緊為li增加  -webkit-box-sizing: border-box;box-sizing: border-box;

看到了,我們的子元素再也不出軌了,因為我們用box-size並沒有為其增加寬度,我相信這個demo各位小夥伴會常用到的。

給乙個最終的css

ul 

ul li

ul li:last-child

按比例縮放顯示bitmap

bitmapfactory.options factoryoptions new bitmapfactory.options 不將讀取到記憶體中,仍然可以通過引數獲得它的高寬 factoryoptions.injustdecodebounds true bitmapfactory.decodefil...

css實現乙個元素高度固定寬度按比例顯示效果

用padding top百分比可以實現寬度固定高度按比例展示,現在的需求是對乙個video 的盒子div高度是固定的,寬度如何按比例展示?解決後效果如圖 紅框標註的即是我在上面高度比例固定的範圍內寬度自適應的效果 css content btn play iframe,object,embed,vi...

css設定文字不換行並顯示省略號

1 單行文字顯示省略號 width value 具體的值 設定容器具體的寬度 white spacing nowrap 強制文字在一行內顯示 overflow hidden 溢位內容為隱藏 text overflow ellipsis 溢位文字顯示省略號 2 多行文字顯示省略號 display we...