我有一个包含法语和英语值的项目列表,我想将值放在彼此的顶部,以便我可以淡化一种语言,而另一种语言淡入.如果我使用以下标记,事情就像我期望的那样.
<!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>但是,如果我将ul的list-style设置为none以删除项目符号,则所有li元素都会堆叠在一起.
<!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>阅读规范https://drafts.csswg.org/css-lists-3/#list-style-property听起来像list-style应该只影响子弹的样式而不是元素的定位.不确定任何见解会发生什么有用.
谢谢,
你需要至少一个列表项不具有absolute保持高度的位置li,ul并且阻止它崩溃,所以只需将其中一个设置div为absolute它就应该给你想要的效果.
<!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>