순서 없는 목록 항목에서 들여쓰기를 제거하는 방법은 무엇입니까?

순서 없는 목록 항목에서 들여쓰기를 제거하는 방법은 무엇입니까?

모든 들여쓰기를 제거합니다.ul. 세팅을 해봤습니다.margin,padding,text-indent로.0, 하지만 소용이 없습니다.그 설정이text-indent음수로 하면 효과가 있습니다. 그러나 그것이 정말로 움푹 들어간 부분을 제거할 수 있는 유일한 것입니까?

목록 스타일과 왼쪽 패딩을 없음으로 설정합니다.

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

총알을 유지하기 위해 당신은 교체할 수 있습니다.list-style: none와 함께list-style-position: inside또는 속기로list-style: inside:

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<ul> 들여쓰기를 제거하기 위해 선호하는 솔루션은 간단한 CSS 원-라이너입니다.

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>

이 솔루션은 경량일 뿐만 아니라 다음과 같은 다양한 이점을 가지고 있습니다.

• 왼쪽 aligns <ul>의 총알은 주변의 일반 단락 텍스트를 가리킵니다(=<ul>의 들여쓰기 제거).
• <li> 요소 내의 텍스트 블록은 여러 줄로 둘러쌀 경우 올바른 들여쓰기 상태를 유지합니다.

---

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

    ul { margin-left: 1.2em; }

CSS에 추가합니다.

ul { list-style-position: inside; }

이렇게 하면 다른 단락 및 텍스트와 동일한 들여쓰기에 lie 요소가 배치됩니다.

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

display:table-row;움푹 들어간 부분도 제거하지만 총알은 제거할 겁니다

패딩 제거:

padding-left: 0;

링크를 제공해주실 수 있나요? 감사합니다. 제가 볼 수 있습니다. 아마 당신의 CSS 셀렉터가 충분히 강하지 않거나 시도해 볼 수 있나요?

padding:0!important;

라이브 데모: 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: "●";
}

원래 문제는 그 요구사항이 명확하지 않기 때문에 다른 답변들이 제시한 가이드라인 안에서 이 문제를 해결하려고 했습니다.특히:

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

저는 또한 패딩을 얼마나 사용할지에 대해 브라우저가 동의하는 것에 의존하지 않는 해결책을 원했습니다.완성도를 위해 주문 목록을 추가했습니다.

나는 내가 나누려는 발에도 같은 문제가 있습니다.위의 몇 가지 제안을 조합하여 시도해 본 결과, 효과가 있다는 것을(를) 확인했습니다.

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

이것은 내 h1 아래에서 왼쪽으로 유지하는 것 같고 총알은 왼쪽으로 밖보다 디브 안에서 가리키는 것 같습니다.

인라인으로 이 작업을 수행하면 마진을 0으로 설정합니다(UL style=" margin:0 px").탄환은 돌출부가 없는 단락과 일치합니다.

저는 다음과 같은 것들이 효과가 있었습니다.Chrome, Edge 및 Firefox에서 (특별한 치료가 필요한).총알은 보관되어 있고 주변 문단과 동일선상에 있습니다.

ul {
  padding-left: 0;
  margin-left: 17px;
}

/* Different value for Firefox */
@-moz-document url-prefix() {
  ul {
    margin-left: 14px;
  }
}

언급URL : https://stackoverflow.com/questions/13938975/how-to-remove-indentation-from-an-unordered-list-item