탐색 용 분리기

탐색 용 분리기

---

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

내 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의사 선택기를 사용하고 있기 때문에 끝에 하나를 넣지 않습니다.

---

다른 해결책은 괜찮지 만 : 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배경에 구분 기호를 추가하고 구분 기호를 덮도록 링크가 확장되지 않도록하십시오. 이는 구분 기호를 클릭 할 수 없음을 의미합니다.

---

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

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

---

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

---

Put it in as a background on the list element:

<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 */

Next, I recommend a different markup for accessibility:
Rather than embedding the images inline, put text in as text, surround each with a span, apply the image as a background the the , and then hide the text with display:none -- this gives much more styling flexibilty, and allows you to use tiling with a 1px wide bg image, saves bandwidth, and you can embed it in a CSS sprite, which saves HTTP calls:

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 OK, I see others got similar answer in before me -- and I note that John also includes a means for keeping the separator from appearing before the first element, by using the li + li selector -- which means any li coming after another li.

---

I believe the best solution for this, is what I use, and that is a natural css border:

border-right:1px solid;

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

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

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

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

행운을 빕니다 :)

참고 URL : https://stackoverflow.com/questions/5688791/separators-for-navigation