메뉴 구분 막대로 작성하는데 첫 번째 항목과 마지막 항목에 막대가 없는 방법?

메뉴 구분 막대로 작성하는데 첫 번째 항목과 마지막 항목에 막대가 없는 방법?

이러한 종류의 메뉴를 실현하려면 어떻게 해야 합니까?

정보 | 프라이버시 | 연락처 | 사이트 맵

... 세로 막대로 구분된 메뉴인데 첫 번째 항목과 마지막 항목에 왼쪽과 오른쪽에 막대가 없습니다(예시 참조).

메뉴 항목은 수동으로 생성되지 않고 동적으로 생성됩니다(워드프레스에서 사용).

감사해요.

목록 항목을 네비게이션의 마크업으로 사용하는 경우 세퍼레이터를 배경 이미지로 생성하여 각 링크 사이의 선을 표시할 수 있습니다.li.

목록 항목 사이에만 표시되도록 하려면 이미지를 왼쪽 위치에 배치해야 합니다.li하지만 첫 번째는 아니에요.다음 예제에서는 인접 셀렉터를 사용합니다.

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

이 CSS는 다른 목록 항목 뒤에 이어지는 모든 목록 항목, 즉 첫 번째 목록 항목을 제외한 모든 항목에 이미지를 추가합니다.

또는 CSS를 사용할 수도 있습니다.content의 소유물건before이미지 대신 유사 클래스다음 코드는 네비게이션링크 전에 파이프를 추가합니다(인접 셀렉터 사용).

#nav li + li a:before {
    content: "|";
}

컨텐츠 속성은 IE6 및 IE7에서 지원되지 않으며, 인접 셀렉터는 IE6에서 지원되지 않습니다.

CSS의 콘텐츠와 브라우저의 호환성에 대해서는, 여기를 참조해 주세요.http://www.quirksmode.org/css/contents.html

세로 막대는 키보드의 문자일 뿐이므로 단어 사이에 입력할 수 있습니다.

워드프레스를 위한 더 쉬운 솔루션을 찾았습니다!

[외관]으로 이동합니다.메뉴 제목별로 네비게이션 라벨 끝에 "|"를 추가합니다!!

이것을 하는 가장 좋은 방법은 CSS 수업이라고 생각합니다.

모양 → 메뉴: http://d.pr/i/I9ko+

1. [화면 옵션]을 클릭합니다.
2. CSS 클래스 확인

3. 마지막 메뉴 항목에 "last" 클래스를 추가한 다음 style.css에서 다음을 추가합니다.

   #nav li.last span { display: none; }

언급URL : https://stackoverflow.com/questions/9898233/how-to-create-a-menu-separated-by-a-bar-but-first-and-last-item-has-no-bar