CSS list-style: none and absolute positioned grand-children
Question
I have a list of items that have French and English values, I want to position the values over top of each other so that I can fade one language out while the other fades in. If I use the following markup things behave as I would expect.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style type="text/css"> ul { } li { position: relative; } div.fra, div.eng { position: absolute; top: 0; } </style> </head> <body> <div id="wrapper"> <ul class="priceItems"> <li> <div class="eng">Eng 1</div> <div class="fra">Fra 1</div> </li> <li> <div class="eng">Eng 2</div> <div class="fra">Fra 2</div> </li> <li> <div class="eng">Eng 3</div> <div class="fra">Fra 3</div> </li> </ul> </div> </body> </html>
However if I set the list-style of the ul to none to remove the bullets all the li elements are stacked on top of each other.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style type="text/css"> ul { list-style: none; } li { position: relative; } div.fra, div.eng { position: absolute; top: 0; } </style> </head> <body> <div id="wrapper"> <ul class="priceItems"> <li> <div class="eng">Eng 1</div> <div class="fra">Fra 1</div> </li> <li> <div class="eng">Eng 2</div> <div class="fra">Fra 2</div> </li> <li> <div class="eng">Eng 3</div> <div class="fra">Fra 3</div> </li> </ul> </div> </body> </html>
Reading the spec https://drafts.csswg.org/css-lists-3/#list-style-property it sounds to me like list-style should only affect the style of the bullet not the positioning of the elements. Not sure what's going on any insight would be helpful.
Thanks,
3 answers
solution1
5 ACCPTED 2016-01-21 17:21:35
You need at least one list item not to have an absolute position to keep the height of the li , the ul and stop it collapsing, so by just setting one of the div 's to absolute it should give you the desired effect.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style type="text/css"> ul { list-style: none; } li { position: relative; } div.fra { top: 0; left: 0; position: absolute; } </style> </head> <body> <div id="wrapper"> <ul class="priceItems"> <li> <div class="eng">Eng 1</div> <div class="fra">Fra 1</div> </li> <li> <div class="eng">Eng 2</div> <div class="fra">Fra 2</div> </li> <li> <div class="eng">Eng 3</div> <div class="fra">Fra 3</div> </li> </ul> </div> </body> </html>
solution2
1 2016-01-21 17:20:58
So I'm not 100% sure whats going on here, but I think it has to do with when you absolutely position an element it pulls it out of the layout and since there's nothing left inside of the li elements they end up with a height of 0px. It probably worked before the list-style was set to none because the list-style bullet added content to the list element.
One way to fix this is to only absoluly position one of the divs or set a height on the li.
div.frag{
position: absolute;
top: 0;
}
or
li{
height: 1em;
}
solution3
0 2016-01-21 17:21:08
You should use margin-left: -40px; in
div.fra, div.eng { position: absolute; top: 0; }
instead of position: absolute; . You should alse remove , div.eng .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.