수평 UL 메뉴의 수직 분할기

수평 UL 메뉴의 수직 분할기

---

가로 탐색 모음 (드롭 다운 없음, 가로 목록 만 있음)을 만들려고하는데 메뉴 항목 사이에 세로 구분선을 추가하는 가장 좋은 방법을 찾는 데 어려움이 있습니다.

실제 HTML은 다음과 같습니다.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

현재 CSS는 다음과 같습니다.

.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}

각 메뉴 항목 사이에 세로 구분선으로 작은 이미지를 원합니다. 단, 첫 번째 항목 앞에 구분선을 표시하지 않고 두 번째 항목 뒤에 구분선을 표시하고 싶지 않습니다.

최종 결과는 다음과 같아야합니다.

항목 1 | 항목 2 | 항목 3 | 항목 4 | 항목 5

파이프를 실제 이미지로 교체하기 만하면됩니다.

다른 방법을 시도했습니다. list-style-image속성 설정을 시도 했지만 이미지가 표시되지 않습니다. 또한 첫 번째 항목 앞에 구분선이 있다는 점을 제외하면 구분선을 실제로 어느 정도 작동하는 배경으로 설정해 보았습니다.

---

"첫 번째 요소를 지정하지 않아도"매우 간단합니다. CSS는 대부분의 생각보다 강력합니다 (예 : first-child:before훌륭합니다!). 그러나 이것은 적어도 제 생각에는 이것을 수행하는 가장 깨끗하고 가장 적절한 방법입니다.

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

이제 HTML에서 정렬되지 않은 간단한 목록을 사용하면 자동으로 채워집니다. HTML은 다음과 같아야합니다.

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

결과는 다음과 같습니다.

홈 | 우리에 대해 | 지원하다

이제 무제한으로 확장 할 수 있으며 순서, 링크 변경 또는 첫 번째 항목에 대해 걱정할 필요가 없습니다. 모두 자동화되어 있으며 훌륭하게 작동합니다!

---

이것을 시도하십시오, 구도자 :

li+li { border-left: 1px solid #000000 }

이것은 인접한 li 요소에만 영향을 미칩니다.

여기 에서 발견

---

이것은 CSS : pseudo-classes를 통해서도 가능합니다. 지원은 그다지 넓지 않으며 위의 답변은 동일한 결과를 제공하지만 순수한 CSS-y =)

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

또는:

.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }

참조 : http://www.quirksmode.org/css/firstchild.html
또는 : http://www.w3schools.com/cssref/sel_firstchild.asp

---

나는 당신의 베스트 샷이 첫 번째 것을 제외하고 border-left각각 의 속성에 할당 된 속성 이라고 생각합니다 li(첫 번째 항목에 이름이 지정된 클래스를 부여 first하고 명시 적으로 테두리를 제거해야합니다).

<li>프로그래밍 방식 으로 생성하는 경우에도 first클래스 할당은 쉬워야합니다.

---

더 간단한 해결책은 #navigation ul li~li { border-left: 1px solid #857D7A; }

---

.last { border-right: none

.last { border-right: none !important; }

---

이것은 나를 위해 잘 작동합니다.

NB I'm using BEM/OCSS SCSS Syntax

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}

---

I do it as Pekka says. Put an inline style on each <li>:

style="border-right: solid 1px #555; border-left: solid 1px #111;"

Take off first and last as appropriate.

참고URL : https://stackoverflow.com/questions/1936661/vertical-dividers-on-horizontal-ul-menu