목록 항목 사이의 세로 간격을 어떻게 설정합니까?


115

<ul>요소 내에서 행 사이의 수직 간격은 분명히 line-height 속성으로 형식을 지정할 수 있습니다.

내 질문은 <ul>요소 내 에서 목록 항목 사이의 세로 간격을 어떻게 설정합니까?


1
ul li { margin: ???; padding: ???; line-height: ???; }CSS 속성의 전부 또는 일부.
Brad Christie

답변:


112

여백을 사용할 수 있습니다. 예를 참조하십시오.

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

특히 li요소가 아닌 요소에 여백을 사용 하십시오 ul.
duanev

41

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

편집 : 마지막 li 요소에 대해 특별한 경우를 사용하지 않으면 나중에 목록에 작은 간격이 생깁니다. http://jsfiddle.net/wQYw7/

이제 내 솔루션과 비교하십시오 : http://jsfiddle.net/wQYw7/1/

확실히 이것은 이전 브라우저에서 작동하지 않지만 이전 브라우저에서 이것을 활성화하는 js 확장을 쉽게 사용할 수 있습니다.


1
웹 개발자 / 코더로서 @Layne의 업무 중 일부는 가능한 한 많은 환경에서 작동하는 솔루션을 제공하는 것입니다. 귀하의 답변은 질문에 대한 과잉입니다.
disinfor

1
나는 그렇게 생각하지 않는다. 목표로 삼고 자하는 환경에 대한 솔루션 만 제공하면 확장 할 계획이없는 한 다른 모든 것은 과도 할 수 있습니다. 또한 모든 답변에는 첫 번째 / 마지막 목록 요소 앞뒤에 공백을 추가하는 단점이 있습니다. 질문이 아니었던 그는 목록 요소 사이에 간격을두기를 원했습니다 (적어도 그가 작성했습니다). 다른 답변의 마지막 요소는 뒤에 오는 li 요소가 없지만 나중에 공백이 있습니다.

그가 작업하고있는 환경은 웹 브라우저입니다. 어디에서나 작동하는 솔루션을 제안하는 것은 과잉이 아닙니다. 또한 마지막 항목 마진이 정말로 걱정된다면 js가 필요한 솔루션을 제안하지 않을 것입니다. 당신이 사용할 수 :first-child있으며 모든 일에 IE7 + 작동합니다
disinfor

4
@disinfor 모든 것을 타겟팅하는 것에 동의하지 않습니다. 웹 개발의 스트레스 중 일부는 우리를 지원하지 않는 브라우저를 지원하는 데서 비롯됩니다. Safari는 그중 하나입니다. 우리는 인터넷을 막는 브라우저, medium.com/@richtr/…에 맞서야 합니다. 우리의 웹 페이지는 "우리는 당신의 브라우저를 지원하지 않습니다"라는 통지를 다시 가져와야합니다. 그리고 우리는 고객들에게도 알리고 맞설 필요가 있습니다. 아니면 우리는 아무것도하지 않고 멋진 바닥 매트가 될 수 있습니다.
1.21 기가 와트

@ 1.21gigawatts "우리 웹 페이지는"우리는 귀하의 브라우저를 지원하지 않습니다 "라는 메시지를 다시 표시해야합니다."mhm, no. 이를 경쟁 방해 행위라고하며 여러 국가에서 불법입니다. Microsoft는 웹용 Skype를 사용하여이를 수행했습니다. 웹용 Skype는 다른 브라우저에서도 완벽하게 작동합니다. 구글은 1 년 이상 사파리에서 유튜브 오작동을 일으켰다. Google은 Tor 사용자가 특정 서비스를 사용하지 못하도록 차단합니다. 특정 플랫폼을 차단하지 않는 것처럼 앱과 서비스를 플랫폼 독립적으로 만드는 "웹 플랫폼"의 요점이 아닙니까? 그렇게하고 싶다면 대신 네이티브 프로그램을 만드는 것은 어떨까요? 결국 그들은 더 강력합니다.
Andreas

35

나는 IE8 지원의 미덕을 가진 이것에 기울일 것입니다.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle


27

태그에 margin를 추가 하십시오 li. 그러면 사이에 공백 이 생기고 태그 내의 텍스트 간격을 설정하는 데 li사용할 수 있습니다 .line-heightli


3

HTML 이메일 블래스트를 생성 할 때 스타일 시트 나 스타일 / 스타일 블록을 사용할 수없는 경우가 많습니다. 모든 CSS는 인라인이어야합니다. 글 머리 기호 사이의 간격을 조정하려면 li style = "margin-bottom : 8px;"를 사용합니다. 각 글 머리 기호 항목에서. 원하는대로 픽셀 값을 사용자 지정합니다.


또한 스타일 / style 유형 태그는 더 이상 사용되지 않습니다
Ben Slade

2

전체 목록에 적용하려면

ul.space_list li { margin-bottom: 1em; }

그런 다음 html에서 :

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

0

의사 클래스를 사용하여 각 목록에 대해 padding-bottom을 설정하는 것은 실행 가능한 방법입니다. 또한 줄 높이를 사용할 수 있습니다. font-family, Font-weight 등과 같은 글꼴 속성은 높이가 고르지 않은 경우 역할을합니다.


2
솔루션의 예를 제공 할 수 있습니까?
Muldec 19

-9

<br><li></li>줄 항목 사이에 내가 시도한 모든 웹 브라우저에서 완벽하게 작동하는 것처럼 보이지만 온라인 W3C CSS3 검사기를 통과하지 못했습니다. 내가 추구하는 줄 간격을 정확하게 제공합니다. 내가 우려하는 한, 의심 할 여지없이 작동하기 때문에 누군가가 좋은 법적 대안을 찾을 수있을 때까지 W3C가 말하는대로 계속 사용하고 있습니다.


현재 줄 높이에 만족하면 제안이 제대로 작동하지만 자신의 공간을 지정하고 싶어한다고 생각합니다. 줄 바꿈을 사용하면 현재 줄 높이를 사용하여 새 줄을 만듭니다.
1.21 기가 와트

항목이 많은 목록을 반복하는 경우 br을 추가하는 것은 끔찍한 방법입니다. 마크 업은 위의 답변에서 제안한 것처럼 공간을 추가하는 가장 안전하고 확실한 방법입니다.
SeaWarrior404
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.