2017-06-21 118 views
0

我需要的款式li元素與border-radius和梯度邊框,使其看起來就像這樣: enter image description here如何在絕對定位的元素上顯示li內容?

HTML:

<li class="myTab"> 
Hello World! 
</li> 

問題是,文本li內不裹任何事情我都無法改變。我使用LESS,試圖做:

.TAB() { 
     #gradient > .linear(top; #655724 0%, #d0704c 50%, #b24e31 100%); 
     border-radius: 15px; 
     position: relative; 

     &::before{ 
      content: ''; 
      position: absolute; 
      width: ~'calc(100% - 4px)'; 
      height: ~'calc(100% - 4px)'; 
      #gradient > .radialEllipse(center; closest-corner; #b4812a 0%, #374e0a 100%); 
      border-radius: 14px; 
     } 
    } 

看起來除了覆蓋僞元素的文本好。有沒有任何方法可以在沒有html更改的情況下在前面添加文本?

P.S.我也不許用z-index屬性使用z-index的T^T

JSFiddle Example

回答

-1

當您使用絕對定位元素的工作務必到位,然後按照正確的順序沿Z軸。

當您使用絕對定位的元素時,請務必將所有內容(即文本等)放入適當的tagElement中,並將所有標籤放在P標籤內。

這裏是代碼:

body{ 
 
    background: #6b7023; 
 
} 
 
ul{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.myTab{ 
 
    list-style: none; 
 
    color: white; 
 
    background: linear-gradient(to bottom, #655724 0%, #d0704c 50%, #b24e31 100%); 
 
\t border-radius: 15px; 
 
\t position: relative; 
 
    min-width: 100px; 
 
    height: 60px; 
 
    align-items: center; 
 
    justify-content: center; 
 
    display: flex; 
 
    margin-right: 10px; 
 
} 
 
.myTab::before{ 
 
    content: ''; 
 
\t position: absolute; 
 
\t width: calc(100% - 4px); 
 
\t height: calc(100% - 4px); 
 
\t background-image: radial-gradient(ellipse closest-corner at center, #b4812a 0%, #374e0a 100%); 
 
\t border-radius: 14px; 
 
    z-index:9; 
 
} 
 
.myTab p { 
 
    z-index:10; 
 
}
<ul> 
 
<li class="myTab"><p>1st tab</p></li> 
 
<li class="myTab"><p>2nd tab</p></li> 
 
<li class="myTab"><p>3rd tab</p></li> 
 
</ul>

+0

的OP不能改變HTML或使用'的z index'。你的答案確實**都**。 –

+0

對不起。試試這個.myTab ::之後{ 內容:'1st tab'; \t position:absolute; }並將其放在代碼後面..myTab :: before {...} –

+0

這也行不通,因爲列表正在由javascript填充,並且也無法更改。 – Alyona

相關問題