에서 들여 쓰기를 모두 제거하고 싶습니다 ul
. margin
에 padding
, text-indent
을 (를) 설정 0
했지만 아무 소용이 없습니다. text-indent
음수로 설정 하면 트릭이 수행되는 것처럼 보이지만 실제로 들여 쓰기를 제거하는 유일한 방법입니까?
에서 들여 쓰기를 모두 제거하고 싶습니다 ul
. margin
에 padding
, text-indent
을 (를) 설정 0
했지만 아무 소용이 없습니다. text-indent
음수로 설정 하면 트릭이 수행되는 것처럼 보이지만 실제로 들여 쓰기를 제거하는 유일한 방법입니까?
답변:
목록 스타일과 왼쪽 여백을 아무것도 설정하지 마십시오.
ul {
list-style: none;
padding-left: 0;
}
글 머리 기호를 유지하려면 list-style: none
with list-style-position: inside
또는 단축을 대체 할 수 있습니다 list-style: inside
.
ul {
list-style-position: inside;
padding-left: 0;
}
list-style-position: outside; padding-left: 1em;
온<ul>
1em
약간의 마법의 가치가 있지만 작동 합니다 ... 그리고 실제로 약간의 들여 쓰기가 남아 있습니다.
<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>
이 솔루션은 경량 일뿐만 아니라 여러 가지 장점이 있습니다.
레거시 정보 :
IE 버전 8 이하의 경우 margin-left를 대신 사용해야합니다.
ul { margin-left: 1.2em; }
ul { padding-left:1.2em; margin-left: 0; }
이것을 CSS에 추가하십시오 :
ul { list-style-position: inside; }
그러면 li 요소가 다른 단락 및 텍스트와 같은 들여 쓰기로 배치됩니다.
참조 : http://www.w3schools.com/cssref/pr_list-style-position.asp
list-style-position: inside
에서 두 번째 및 다음 줄의 텍스트를 글 머리 기호에 맞 춥니 다. 이것은 바람직하지 않습니다.
라이브 데모 : 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: "●";
}
원래 질문은 요구 사항에 대해 명확하지 않으므로 다른 답변에서 설정 한 지침 내 에서이 문제를 해결하려고했습니다. 특히:
또한 사용할 패딩 양에 동의하는 브라우저에 의존하지 않는 솔루션을 원했습니다. 완전성을 위해 정렬 된 목록을 추가했습니다.
이 인라인을 수행하여 여백을 0 (ul style = "margin : -0px")으로 설정했습니다. 글 머리 기호는 돌출부가없는 단락과 정렬됩니다.