[css] 탐색 용 구분 기호

Program / 글쓴이

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

요소 사이의 구분자.

내 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;
}