CSS列表樣式：無和絕對定位的大孩子

我有一個項目的列表中有法國和英國值，我想把值放在彼此之上，以便我可以淡出一種語言，而另一種語言淡入。如果我使用下面的標記，事情就像我期望的那樣。CSS列表樣式：無和絕對定位的大孩子

<!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無法比擬的列表樣式刪除所有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>

讀取規格3210它聽起來好像列表樣式只會影響子彈不元素的定位風格。不確定發生什麼事情會有所幫助。

感謝，

來源

2016-01-21 curriegrr

至少需要一個列表項並非有一個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>

來源

2016-01-21 17:21:35

所以我不是100％肯定什麼怎麼回事，但我認爲這與當你絕對定位它拉出來佈局的元素做，因爲什麼都不剩內li元素的最終高度爲0px。它可能在list-style設置爲none之前有效，因爲list-style項目符號將內容添加到list元素。

解決此問題的一種方法是僅絕對定位其中一個div或在li上設置高度。

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

或

li{ 
    height: 1em; 
}

來源

2016-01-21 17:20:58

你應該

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

，而不是position: absolute;使用margin-left: -40px;。你應該刪除, div.eng。

來源

2016-01-21 17:21:08 Miodrag

CSS列表樣式：無和絕對定位的大孩子

回答

相關問題