CSS에서 두 번째 배경색과 두 번째 배경색 요소의 가운데에 맞춘 텍스트를 어떻게 가질 수 있습니까?

Question

이 이미지와 비슷한 것을하고 싶습니다. ul menu li tags

모든 요소에 이중 태그를 사용해야합니까? 예 :

<ul class="menu"> 
    <div class="outside"><li class="inside"><a href="#">Firefox</a></li></div> 
    <div class="outside"><li class="inside"><a href="#">Chrome</a></li></div> 
    <div class="outside"><li class="inside"><a href="#">Opera</a></li></div> 
</ul> 

또는 이중 li 태그 일 수 있습니까? CSS에서 선형 그라디언트 속성을 시도했지만 단 하나의 태그 만 사용하고 이미지에서와 같은 결과를 얻으려는 경우 배경색이 다른 두 개의 다른 태그가 있어야하고 검정색을 가진 것은 더 높은 z- 인덱스 속성을 가져야합니다.

저는 꽤 새롭고 디자인과 스타일링에 약간의 어려움이 있습니다. 그래서 당신의 도움을 위해 미리 감사드립니다.

Answer 1

당신은 왼쪽 색깔의 측면

주, 사용한 div의이 ul의 직접적인 자식으로 유효를 만들 의사 요소 ::before을 사용할 수 있습니다, 그래서 나는 그들에게

ul.menu { 
 
    display: flex; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
ul.menu li { 
 
    margin: 0 5px; 
 
} 
 
ul.menu a { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 120px; 
 
    background: black; 
 
    color: white; 
 
    padding: 4px 0 4px 10px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
ul.menu a::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; bottom: 0; 
 
    background: gray; 
 
    width: 10px; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Firefox</a></li> 
 
    <li><a href="#">Chrome</a></li> 
 
    <li><a href="#">Opera</a></li> 
 
</ul>

을 제거

---

또는 왼쪽 border

ul.menu { 
 
    display: flex; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
ul.menu li { 
 
    margin: 0 5px; 
 
} 
 
ul.menu a { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 120px; 
 
    background: black; 
 
    color: white; 
 
    padding: 4px 0; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    border-left: 10px solid gray; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Firefox</a></li> 
 
    <li><a href="#">Chrome</a></li> 
 
    <li><a href="#">Opera</a></li> 
 
</ul>

Answer 2

당신 사용 선형 그라데이션, 그냥 같은 지점에서
(예 : gray 10%, black 10%)로 그라디언트의 두 값을 배치 할 수 있도록 그 시점에서 배경을 나누었습니다.

사이드 참고 :가 ul 요소 내부 유효하지 않기 때문에 당신은 또한 당신의 li 태그 주위에 outter는에게 div의를 제거해야합니다. 완벽

ul.menu { 
 
    list-style: none; 
 
    display: flex; 
 
} 
 

 
ul.menu li.inside { 
 
    background: linear-gradient(to right, gray 10%, black 10%); 
 
    margin-left: 5px; 
 
    padding: 5px 5px 5px 20px; 
 
    width: 120px; 
 
    display: block; 
 
    box-sizing: border-box; 
 
} 
 

 
li a { 
 
    color: white; 
 
}

<ul class="menu"> 
 
    <li class="inside"><a href="#">Firefox</a></li> 
 
    <li class="inside"><a href="#">Chrome</a></li> 
 
    <li class="inside"><a href="#">Opera</a></li> 
 
</ul>