Question

我有一个包含法语和英语值的项目列表，我希望将这些值放在彼此的顶部，以便我可以将一种语言淡出而另一种语言淡入。如果我使用以下标记，则表现为我期待。

<!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应该只影响子弹的样式而不影响元素的定位。不确定任何洞察力会有什么帮助。

谢谢，

Answer 1

您需要至少一个列表项不具有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>它会给你带来预期的效果。

＆＃13;

   public static void colorStatusBar(Window window, Context context, boolean transparent) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        if(transparent){
            window.setStatusBarColor(context.getResources().getColor(android.R.color.transparent));
        }else{
            window.setStatusBarColor(context.getResources().getColor(R.color.timeline_unselected));
        }
    }
}

＆＃13;

Answer 2

所以我不是百分之百确定这里发生了什么，但我认为这与你绝对定位一个元素它将它从布局中拉出来有关，因为li元素内部没有任何东西它们最终高度为0px。它可能在list-style设置为none之前有效，因为list-style bullet将内容添加到list元素。

解决此问题的一种方法是仅对其中一个div进行绝对定位或在li上设置高度。

div.frag{
   position: absolute;
   top: 0;
}

或

li{
  height: 1em;
}

Answer 3

您应该在

中使用margin-left: -40px;

div.fra, div.eng { position: absolute; top: 0; }

而不是position: absolute;。您还应该删除, div.eng。

CSS list-style：none和绝对定位的grand-children

3 个答案: