CSS에서 원하지 않는 목록 들여쓰기를 제거하는 방법은 무엇입니까?

CSS로 목록 들여쓰기 제거: 종합 가이드

순서가 지정되지 않은 목록에서, 특히 줄바꿈할 때 원하지 않는 들여쓰기는 실망스러울 수 있습니다. 다음은 이 문제를 해결하기 위한 심층적인 해결 방법입니다.

귀하의 예에서는 float: left on

사용으로 인해 들여쓰기가 발생했습니다. 강요. 이렇게 하면 공간을 수평으로 채우는 블록 수준 요소가 생성됩니다. 또한 상위 컨테이너 #info에서 여백을 사용하면 들여쓰기가 발생할 수도 있습니다.

들여쓰기를 제거하려면 다음 CSS를 구현하세요.

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

이 코드는 들여쓰기에 포함된 패딩을 제거합니다.

요소를 사용하고 기본 목록 글머리 기호를 숨깁니다.

이전에 여백과 패딩을 0으로 설정하려고 시도했을 수도 있지만 이것만으로는 충분하지 않을 수 있습니다.

• 의 부동 및 너비 속성을 조정합니다. 요소를 사용하면 원하지 않는 공간을 제거할 수 있습니다.

  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  이러한 스타일 변경과 함께 원하는 레이아웃을 얻으려면 상위 컨테이너 #info의 여백이나 위치를 조정해야 할 수도 있습니다.

  다음은 제안된 변경 사항이 포함된 HTML/CSS의 수정된 버전입니다.

  <div>
  <pre class="brush:php;toolbar:false">#info {
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF;
    padding: 20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
  }
  
  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  이러한 변경 사항을 적용한 후 원하지 않는 들여쓰기가 사라져 목록 항목이 왼쪽 가장자리와 같은 높이로 정렬되어야 합니다.