탐색 용 구분 기호

탐색 요소 사이에 구분 기호를 추가해야합니다. 구분자는 이미지입니다.

내 HTML 구조는 다음과 같습니다 ol > li > a > img..

여기에 두 가지 가능한 해결책이 있습니다.

1. li분리 할 태그를 더 추가하려면 (boo!)
2. 각 요소의 이미지에 구분 기호를 포함합니다 (이 방법이 더 좋지만 사용자가 "홈"과 같은 클릭을 할 수 있지만 "서비스"에 도달 할 가능성이 있습니다. 이는 서로 뒤에 있고 사용자가 실수로 구분 기호를 클릭 할 수 있기 때문입니다.) "서비스"에 속함);

무엇을해야합니까?

에서 배경 이미지로 구분자 이미지를 사용하기 만하면됩니다 li.

목록 항목 사이에만 표시되도록하려면 이미지를 li첫 번째 항목이 아닌 왼쪽에 배치합니다 .

예를 들면 :

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

이 CSS는 다른 목록 항목을 따르는 모든 목록 항목에 이미지를 추가합니다.

NB. 주의 인접한 선택 방금 (조건부 스타일 시트로) 기존의 리튬에 배경 이미지를 추가하고 아마도 가장자리 중 하나에 음의 마진을 적용해야합니다, 그래서 (리 + 리) IE6에서 작동하지 않습니다.

구분 기호로 이미지를 사용할 필요가 없다면 순수한 CSS로이 작업을 수행 할 수 있습니다.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

이렇게하면 원래 질문의 이미지가 설명 된 것처럼 각 목록 항목 사이에 막대가 생깁니다. 그러나 인접한 선택자를 사용하고 있기 때문에 첫 번째 요소 앞에 막대를 넣지 않습니다. 그리고 우리는 :before의사 선택기를 사용하고 있기 때문에 끝에 하나를 넣지 않습니다.

li구분선을 추가 할 요소를 하나 추가 할 수 있습니다.

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

CSS에서 다음 코드를 추가 할 수 있습니다.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

이미지를로드하지 않으므로 실행 속도가 빨라집니다. 그냥 테스트 해보세요 .. :)

다른 해결책은 괜찮지 만 : after를 사용하는 경우 마지막에 구분 기호를 추가 할 필요가 없습니다 . 하거나 : before를 사용하는 경우 맨 처음 .

그래서:

사례 : 이후

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

사례 : 이전

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

구분 기호를 메뉴 텍스트를 기준으로 세로 중앙에 맞추려면

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

li배경에 구분 기호를 추가하고 구분 기호를 덮도록 링크가 확장되지 않도록합니다. 즉, 구분 기호를 클릭 할 수 없습니다.

Sass를 사용하는 사람들 을 위해이 목적을 위해 믹스 인 을 작성했습니다 .

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

예:

@include addSeparator('li', '|', 1em);

이것은 당신에게 줄 것입니다 :

li+li:before {
  content: "|";
  padding: 0 1em;
}

나는 이것에 대한 최선의 해결책이 내가 사용하는 것이고 그것은 자연스러운 CSS 테두리라고 믿습니다.

border-right:1px solid;

다음과 같이 패딩을 처리해야 할 수도 있습니다.

padding-left: 5px;
padding-right: 5px;

마지막으로, 마지막 li이 분리 된 테두리를 갖지 않게하려면 다음과 같이 "border-right"에서 마지막 자식 "none"을 지정하십시오.

li:last-child{
  border-right:none;
}

행운을 빕니다 :)

목록 요소의 배경으로 넣으십시오.

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

다음으로 접근성을 위해 다른 마크 업을 권장합니다.
. 이미지를 인라인으로 삽입하는 대신 텍스트를 텍스트로 넣고 각각을 범위로 둘러싸고 이미지를 배경으로 적용한 다음 display : none-this로 텍스트를 숨 깁니다. 훨씬 더 많은 스타일링 유연성을 제공하고 1px 너비의 bg 이미지로 타일링을 사용하고 대역폭을 절약하며 HTTP 호출을 절약하는 CSS 스프라이트에 포함 할 수 있습니다.

HTML :

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS :

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE 좋아요, 다른 사람들이 나보다 앞서 비슷한 대답을 얻었습니다. 그리고 John은 또한 li + li 선택기를 사용하여 구분 기호가 첫 번째 요소 앞에 나타나지 않도록 유지하는 수단을 포함하고 있습니다. 리.