정렬되지 않은 목록 항목에서 들여 쓰기를 제거하는 방법?


260

에서 들여 쓰기를 모두 제거하고 싶습니다 ul. marginpadding, text-indent을 (를) 설정 0했지만 아무 소용이 없습니다. text-indent음수로 설정 하면 트릭이 수행되는 것처럼 보이지만 실제로 들여 쓰기를 제거하는 유일한 방법입니까?


HTML 및 CSS 없이는 말하기 어렵지만 규칙으로 구성된 CSS 재설정 / 정규화 사용 ul {padding : 0; margin : 0;}은 대부분의 경우 트릭을 수행합니다. 텍스트 들여 쓰기와 관련이 없다고 확신합니다.
Jawad

실제로하고있는 일을 보지 않으면 문제가 무엇인지 말하기 어렵습니다. ul의 여백과 패딩을 모두 0으로 설정하면 크로스 브라우저가 작동합니다.
kinakuta

6
"작동하지 않았습니다. CSS 재설정을 사용할 수 없습니다. 내 변경 사항은 60 명이 넘는 사람들이 작업하는 거대한 웹 프레임 워크의 일부입니다."-Haha. 질문을 명확하게하지 않은 것보다!
Jawad

답변:


416

목록 스타일과 왼쪽 여백을 아무것도 설정하지 마십시오.

ul {
    list-style: none;
    padding-left: 0;
}​

글 머리 기호를 유지하려면 list-style: nonewith list-style-position: inside또는 단축을 대체 할 수 있습니다 list-style: inside.

ul {
  list-style-position: inside;
  padding-left: 0;
}


18
들여 쓰기를 제거하고 다음과 같이 번호 매기기 / 글 머리 기호를 유지할 수 있습니다. ul {list-style-position : inside; padding-left : 0;}
Myforwik 2016 년

4
글쎄, 당신은 당신의 대답을 편집 했으므로 글 머리 기호가 유지되지만 여전히 여러 줄의 텍스트가있는 줄이 모든 줄을 올바르게 들여 쓰기하지 못하는 문제가 있습니다. 편집을 계속하면 마침내 내 솔루션으로 끝날 수 있습니다. : D
Jpsy 2015 년

글 머리 기호를 유지하는 두 번째 솔루션은 더 이상 작동하지 않는 것 같습니다 (Windows의 Chrome 55). 대안이 있습니까?
Tom Pažourek

2
TomPažourek @ 시도 list-style-position: outside; padding-left: 1em;<ul>
j08691

1
@ j08691 : 그래, 그것은 1em약간의 마법의 가치가 있지만 작동 합니다 ... 그리고 실제로 약간의 들여 쓰기가 남아 있습니다.
Tom Pažourek

93

<ul> 들여 쓰기를 제거하는 가장 선호하는 솔루션은 간단한 CSS one-liner입니다.

ul { padding-left: 1.2em; }
<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

이 솔루션은 경량 일뿐만 아니라 여러 가지 장점이 있습니다.

  • <ul>의 글 머리 기호를 주변의 일반 단락 텍스트에 잘 맞 춥니 다 (= <ul> 들여 쓰기 제거).
  • <li> 요소 내의 텍스트 블록이 여러 줄로 줄 바꿈되면 올바르게 들여 쓰기 된 상태로 유지됩니다.

레거시 정보 :
IE 버전 8 이하의 경우 margin-left를 대신 사용해야합니다.

    ul { margin-left: 1.2em; }

내 게시물에 이미있는 모든 문제인 @aioobe에 대해 설명했습니다. 그러나 다시 여기에 : 허용 된 답변 (현재 게시 상태를 개선하기 위해 여러 번 편집했기 때문에 현재 상태)은 이제 글 머리 기호를 유지하지만 (두 번째 예제를 사용하는 경우) 글 머리 기호 여러 줄을 올바르게 들여 쓰기하지 않습니다 본문. jsfiddle.net/v6nyuq6f/88 효과를 보여주기 위해 수정 된 허용 된 답변의 두 번째 예제의 바이올린은 다음과 같습니다 . jsfiddle.net/v6nyuq6f/89
Jpsy

따라서 2016 년이며 "모든 브라우저에 완벽하지는 않은"값에 의존하는 것이이 일반적인 문제에 대한 가장 깨끗한 솔루션입니다. CSS3 기능을 사용하여 항목 기호의 정확한 너비를 얻는 방법이 있습니까?
F30

안전을 위해 :ul { padding-left:1.2em; margin-left: 0; }
Andrew Murphy

1
이 페이지의 유일한 솔루션으로 긴 목록 항목에서 올바르게 작동합니다 (올바로 감싸기).
FredyWenger 2016

8

이것을 CSS에 추가하십시오 :

ul { list-style-position: inside; }

그러면 li 요소가 다른 단락 및 텍스트와 같은 들여 쓰기로 배치됩니다.

참조 : http://www.w3schools.com/cssref/pr_list-style-position.asp


6
여러 개의 텍스트 줄이있는 <li> s list-style-position: inside에서 두 번째 및 다음 줄의 텍스트를 글 머리 기호에 맞 춥니 다. 이것은 바람직하지 않습니다.
Jpsy

7

display:table-row; 또한 들여 쓰기를 제거하지만 글 머리 기호를 제거합니다.



4

당신은 링크를 제공 할 수 있습니까? 감사합니다. CSS 선택기가 충분히 강하지 않거나 시도해 볼 수 있습니다.

padding:0!important;


1
0을 지정할 때 치수가 필요하지 않습니다.
raam86

11
!importantis EVIL
Madbreaks

@Madbreaks 선택기가 올바른 경우와 유스 케이스가 맞지만 올바른 선택이 아닌 경우 작동 할 수 있습니다.이 경우 기본 파일 변경으로 대체 해야하는 주요 CSS 규칙이 있으므로 코어를 해킹하지 않는 것과 같은 압정? 어쩌면 내가 틀렸다는 것을 모른다
naeluh

4

나는 나누려고하는 바닥 글과 같은 문제가 있습니다. 위의 몇 가지 제안을 결합하여 나에게 도움이되었다는 것을 알았습니다.

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

이것은 내 h1 아래에서 왼쪽으로 유지하고 총알은 왼쪽 외부가 아닌 div 내부에서 유지하는 것으로 보입니다.


3

라이브 데모 : https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

원래 질문은 요구 사항에 대해 명확하지 않으므로 다른 답변에서 설정 한 지침 내 에서이 문제를 해결하려고했습니다. 특히:

  • 목록 글 머리 기호를 외부 단락 텍스트와 정렬
  • 동일한 목록 항목 내에서 여러 줄 정렬

또한 사용할 패딩 양에 동의하는 브라우저에 의존하지 않는 솔루션을 원했습니다. 완전성을 위해 정렬 된 목록을 추가했습니다.


-1

이 인라인을 수행하여 여백을 0 (ul style = "margin : -0px")으로 설정했습니다. 글 머리 기호는 돌출부가없는 단락과 정렬됩니다.


왜 당신이 0 앞의 음수 부호 이외의 다운 투표를했는지 이해할 수 없습니다. 나는 이것을 Chrome에서 시도해 보았지만 padding-left : 0 솔루션은 효과가 없었습니다. 이것은 Chrome 버전 79.0.3945.88 WinX, 64 비트에 있습니다.
MrPotatoHead

위의 코멘트에 추가 ... 편집 할 수 없기 때문에 ... 이걸로 조금 더 연주했으며 최신 Firefox (71.0)에서는 동작이 동일합니다. 그러나 이것은 순서가없는 목록 (ul)입니다. 정렬 된 목록 (ol)을 사용할 때 1.2em은 목록의 왼쪽 가장자리를 다른 텍스트의 왼쪽 여백에 맞추는 것 같습니다 (위의 Jpsy 답변에 따라).
MrPotatoHead
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.