순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

developer tip

순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

optionbox 2020. 10. 31. 09:37

순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

이 HTML 스타일을 지정할 수 있습니까?

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

... 이렇게 ...

여기에 이미지 설명 입력

... 특정 목록 항목에 클래스를 추가하지 않거나 자바 스크립트에 의지하지 않습니까? 그렇다면 어떻게?

줄 바꿈은 고정되지 않습니다. 목록이 확장되어 추가 공간을 차지하고 목록 항목은 가운데 정렬됩니다.

이것은 이제 가능합니다 `flex-box`

이 기술의 핵심 :

로 설정된 컨테이너 요소 overflow: hidden.
설정 justify-content: space-between상의 ul왼쪽 및 오른쪽 가장자리에 스트레치 자사의 플렉스 항목을 강제로 (플렉스 박스 인).
설정 margin-left: -1px상의 ul컨테이너를 오버 플로우의 왼쪽 가장자리를 일으킬 수 있습니다.
플렉스 아이템 border-left: 1px에 설정 li합니다.

컨테이너는 왼쪽 가장자리에 닿는 모든 플렉스 항목의 테두리를 숨기는 마스크 역할을합니다.

.flex-list {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
.flex-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
}
.flex-list li {
    flex-grow: 1;
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
    <ul>
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
    </ul>
</div>

다만

li + li::before {
    content: " | ";
}

물론 이것은 실제로 OP의 문제를 해결하지 않습니다. 그는 끊어진 위치에 따라 선의 시작과 끝에서 세로 막대를 제거하려고합니다. 필자는이 문제를 CSS를 사용하여 해결할 수 없으며 브라우저 엔진의 텍스트 측정 / 레이아웃 / 줄 바꿈 논리를 본질적으로 다시 작성하지 않는 한 JS로도 해결할 수 없다고 주장합니다.

내가 볼 수있는 한 CSS의 유일한 부분은 줄 바꿈에 대해 "알고"있는 것입니다. 첫째, ::first-line가상 요소입니다.이 요소는 여기서 도움이되지 않습니다. 어쨌든 몇 가지 표현 속성으로 제한됩니다. :: before 및 :: after와 같은 항목과 함께 작동하지 않습니다. 내가 생각할 수있는 CSS의 유일한 다른 측면은 어느 정도 줄 바꿈을 노출시키는 것은 하이픈 연결입니다. 그러나 하이픈을 넣는 것은 특정 상황에서 줄 끝에 문자 (일반적으로 대시)를 추가 하는 것에 관한 것이지만 여기서는 문자 (수직선)를 제거 하는 데 관심이 있으므로 어떤 종류의 적용 방법도 볼 수 없습니다. 와 같은 속성의 도움으로도 하이픈 연결 관련 논리의 hyphenate-character.

우리는 word-spacing줄 내부에 적용되지만 줄의 시작과 끝에는 적용되지 않는 속성이 있습니다. 이것은 유망 해 보이지만 사용할 문자가 아닌 단어 사이의 간격을 정의합니다.

다음 text-overflow과 같이 왼쪽과 오른쪽에 오버플로 텍스트를 표시하기 위해 두 값을 가져 오는 거의 알려지지 않은 기능을 가진 속성 을 사용하는 방법이 있는지 궁금합니다 .

text-overflow: '' '';

하지만 여기서 A에서 B로 이동할 수있는 확실한 방법이 아직없는 것 같습니다.

코드를 표시하기 전에 IE8이를 지원 :first-child하지만 지원 하지 않는다는 점을 언급 할 가치가 :last-child있으므로 유사한 상황에서는 :first-child의사 클래스를 사용해야합니다 .

데모

#menu{
    list-style: none;
}
#menu li{
    display: inline;
    padding: 0 10px;
    border-left: solid 1px black;
}
#menu li:first-child{
    border-left: none;
}

<ul id="menu">
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>More animals</li>
</ul>

:after의사 선택기를 사용하십시오 . http://jsfiddle.net/A52T8/1/ 봐

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }

편집하다:

jQuery 솔루션 :

html :

<div>
    <ul id="animals">
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
        <li>Monkey</li>
        <li>Hedgehog</li>
        <li>Chicken</li>
        <li>Rabbit</li>
        <li>Gorilla</li>
    </ul>
</div>

css :

div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }

jQuery

var maxWidth = 300, // Your div max-width
    totalWidth = 0;
$('#animals li').each(function(){
    var currentWidth = $(this).outerWidth(),
        nextWidth = $(this).next().outerWidth();
    totalWidth += currentWidth;
    if ( (totalWidth + nextWidth) > maxWidth ) {
        $(this).css('border', 'none');
        totalWidth = 0;
    }
});

Take a look here. I also added a few more animals. http://jsfiddle.net/A52T8/10/

I know I'm a bit late to the party, but if you can put up with having the lines left-justified, one hack is to put the pipes before the items and then put a mask over the left edge, basically like so:

li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}

more complete example: http://jsbin.com/hoyaduxi/1/edit

One solution is to style the left border like so:

li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}

However, this may not give you desirable results if the entire lists wraps, like it does in your example. I.e. it would give something like:

foo | bar | baz
 | bob | bill
 | judy

I came across a solution today that does not appear to be here already and which seems to work quite well so far. The accepted answer does not work as-is on IE10 but this one does. http://codepen.io/vithun/pen/yDsjf/ credit to the author of course!

.pipe-separated-list-container {
  overflow-x: hidden;
}
.pipe-separated-list-container ul {
  list-style-type: none;
  position: relative;
  left: -1px;
  padding: 0;
}
.pipe-separated-list-container ul li {
  display: inline-block;
  line-height: 1;
  padding: 0 1em;
  margin-bottom: 1em;
  border-left: 1px solid;
}

<div class="pipe-separated-list-container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty</li>
    <li>Twenty One</li>
    <li>Twenty Two</li>
    <li>Twenty Three</li>
    <li>Twenty Four</li>
    <li>Twenty Five</li>
    <li>Twenty Six</li>
    <li>Twenty Seven</li>
    <li>Twenty Eight</li>
    <li>Twenty Nine</li>
    <li>Thirty</li>
  </ul>
</div>

예, 유사 요소와 유사 선택기를 사용해야합니다. http://jsfiddle.net/cYky9/

다음 CSS를 사용하여 해결할 수 있습니다.

ul li { float: left; }
ul li:before { content: "|"; padding: 0 .5em; }
ul li:first-child:before { content: ""; padding: 0; }

IE8 +에서도 작동합니다.

참고 URL : https://stackoverflow.com/questions/9171699/add-a-pipe-separator-after-items-in-an-unordered-list-unless-that-item-is-the-la

'developer tip' 카테고리의 다른 글

OnItemClickListener android를 사용한 ListView (0)	2020.10.31
HttpClient 4.0.1-연결 해제 방법? (0)	2020.10.31
foreach 목록 항목의 역순 (0)	2020.10.31
LESS로 부트 스트랩 변수 재정의 (0)	2020.10.31
C #에서 가장 높은 배열 값 및 인덱스 찾기 (0)	2020.10.31

현재글순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

optionbox

순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

이것은 이제 가능합니다 `flex-box`

데모

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

티스토리툴바

순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

순서가 지정되지 않은 목록의 항목 뒤에 파이프 구분 기호 추가

이것은 이제 가능합니다 flex-box

데모

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

관련글

티스토리툴바

이것은 이제 가능합니다 `flex-box`