CSS : 글 머리 기호와 <li> 사이의 제어 공간

글 머리 기호 <li>가 <ol>또는 의 오른쪽으로 얼마나 많은 수평 공간을 밀어 넣는 지 제어하고 싶습니다 <ul>.

즉, 항상

*  Some list text goes
   here.

나는 그것을 바꿀 수 있기를 원합니다.

*         Some list text goes
          here.

또는

*Some list text goes
 here.

주변을 둘러 보았지만 전체 블록을 왼쪽 또는 오른쪽으로 이동하는 지침 만 찾을 수있었습니다 (예 : http://www.alistapart.com/articles/taminglists/).

내용을 span상대적으로 배치 한 다음의 left속성으로 공간을 제어 할 수 있습니다 span.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

여기에 다른 답변을 요약하면 – 글 머리 기호와 <li>목록 항목 의 텍스트 사이의 간격을보다 세밀하게 제어하려면 옵션은 다음과 같습니다.

(1) 배경 이미지를 사용하십시오.

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

장점 :

• 총알에 원하는 이미지를 사용할 수 있습니다
• CSS background-position를 사용하여 픽셀, em 또는 %를 사용하여 텍스트와 관련하여 원하는 위치에 이미지를 배치 할 수 있습니다

단점 :

• 페이지에 여분의 (작지만) 이미지 파일을 추가하여 페이지 무게를 늘립니다.
• 사용자가 브라우저에서 텍스트 크기를 늘리면 글 머리 기호는 원래 크기로 유지됩니다. 텍스트 크기가 커질수록 위치가 더 멀어 질 수 있습니다.
• 너비에 대한 백분율 만 사용하여 '응답 성'레이아웃을 개발하는 경우 화면 너비 범위에서 원하는 위치에 정확하게 글 머리 기호를 얻는 것이 어려울 수 있습니다.

2. <li>태그에 패딩을 사용하십시오

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

장점 :

• 다운로드 할 이미지가 없습니다 = 1 개 적은 파일
• 온 패딩을 조정하여 <li>, 당신은만큼 추가 할 수 있습니다 추가 와 같은 총알과 같은 텍스트 사이의 수평 공간
• 사용자가 텍스트 크기를 늘리면 간격과 글 머리 기호 크기가 비례 적으로 조정되어야합니다

단점 :

• 브라우저 기본값보다 글 머리 기호를 텍스트에 더 가깝게 이동할 수 없습니다
• CSS 내장 글 머리 기호 유형의 모양과 크기로 제한
• 글 머리 기호는 텍스트와 색상이 같아야합니다
• 총알의 수직 위치를 제어 할 수 없음

(3) 텍스트를 여분의 <span>요소로 감싸십시오.

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

장점 :

• 다운로드 할 이미지가 없습니다 = 1 개 적은 파일
• 당신은 옵션보다 총알의 위치를보다 효율적으로 관리를 얻을 수 (2) - 내 최선의 노력에도 불구하고 당신이 추가하여 수직 위치를 변경할 수 없습니다 보이더라도 당신은 (텍스트에 더 가까이 이동할 수 있습니다 padding-top받는 <span>다른 사람이있을 수 있습니다. 그러나 이것에 대한 해결 방법은 ...)
• 글 머리 기호는 텍스트와 다른 색상 일 수 있습니다
• 사용자가 텍스트 크기를 늘리면 글 머리 기호의 비율이 조정됩니다 (px가 아닌 패딩 및 여백을 설정 한 경우).

단점 :

• 추가로 의미없는 요소가 필요합니다 (실제보다 더 많은 친구를 잃게 될 것입니다).하지만 코드를 좋아하는 사람들은 가능한 한 간결하고 효율적이며 프레젠테이션과 컨텐츠의 분리를 위반합니다. HTML / CSS가 제공해야합니다)
• 총알의 크기와 모양에 대한 통제력 없음

CSS4의 새로운 목록 스타일 기능을 기대하고 있으므로 이미지 나 exta 마크 업에 의존하지 않고 더 똑똑한 글 머리 기호를 만들 수 있습니다. :)

그렇게해야합니다. 글 머리 기호를 외부로 설정하십시오. IE7에서 CSS 의사 요소를 아래쪽으로 떨어 뜨릴 수 있으면 CSS 의사 요소를 사용할 수도 있습니다. 나는 이런 종류의 의사 요소를 사용하지 않는 것이 좋지만 거리를 제어하는 ​​데 효과적입니다.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

오래된 질문이지만 : before pseudo 요소는 여기서 잘 작동합니다.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

실제로 잘 작동하며 많은 추가 규칙이나 html이 필요하지 않습니다.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

건배!

대한 목록 스타일 유형 : 인라인 :

DSMann8의 답변과 거의 동일하지만 CSS 코드는 적습니다.

당신은 단지

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

건배

목록 자체가 아닌padding-left 목록 항목 에서 속성을 사용할 수 있습니다 .

li에 텍스트 들여 쓰기를 사용하는 것이 가장 좋습니다.

텍스트 들여 쓰기 : -x px; 총알을 li에 더 가깝게 이동시키고 그 반대도 마찬가지입니다.

스팬에서 relative를 사용하면 음수 왼쪽이 IE의 이전 버전에서 제대로 작동하지 않을 수 있습니다. PS- 가능한 한 자세를 취하는 것을 피하십시오.

다음은 CSS 카운터 및 의사 요소를 사용하는 또 다른 솔루션입니다. 여분의 html 마크 업이나 CSS 클래스를 사용할 필요가 없으므로 더 우아합니다.

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

간격이 목록 요소의 첫 번째 줄에만 영향을 미치도록 분리 할 수없는 공백을 사용합니다 (목록 요소가 두 줄 이상인 경우). 대신 패딩을 사용할 수 있습니다.

오래된 질문이지만 여전히 관련이 있습니다. negative를 사용하는 것이 좋습니다 text-indent. list-style-position이어야합니다 outside.

장점 :

• 총알이 제대로 자동 배치됩니다
• 글씨 크기를 변경해도 총알 위치가 깨지지 않습니다
• 추가 요소가 없습니다 (:: 의사 요소도 없음)
• CSS를 변경하지 않고 RTL과 LTR 모두에서 작동합니다.

단점 :

• 시험
• 에
• 찾기
• 하나 :)

순서가없는 목록은 ul 태그로 시작합니다. 각 목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)로 표시됩니다.

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

산출:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

text-indent 속성은 텍스트 블록에서 첫 번째 줄의 들여 쓰기를 지정합니다.
참고 : 음수 값이 허용됩니다. 값이 음수이면 첫 번째 줄이 왼쪽으로 들여 쓰기됩니다.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li> 태그의 패딩을 사용하여 간격을 제어 할 수있는 것 같습니다.

<style type="text/css">
    li { padding-left: 10px; }
</style>

캐치는 그것이 당신이 당신의 마지막 예제와 같이 아늑한 것을 긁지 못하게하는 것 같습니다.

이를 위해리스트 스타일 유형을 끄고 & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

글 머리 기호와 텍스트 사이의 간격 만 줄이려면 훨씬 깨끗한 솔루션이있는 것 같습니다.

li:before {
    content: "";
    margin-left: -0.5rem;
}

대안으로 배경 이미지 교체를 사용하여 수직 및 수평 위치를 완벽하게 제어 할 수 있습니다.

이 질문에 대한 답을보십시오

ul
{
list-style-position:inside;
} 

정의와 사용법

list-style-position 속성은 목록 항목 표시자가 내용 흐름 내부 또는 외부에 표시되어야하는지 여부를 지정합니다.

출처 : http://www.w3schools.com/cssref/pr_list-style-position.asp

당신은 사용할 수 있습니다 ul li:before및 배경 이미지, 그리고 지정 position: relative및 position:absolute받는 사람 li과 li:before, 각각. 이 방법으로 이미지를 만들어 li에 대해 원하는 위치에 배치 할 수 있습니다.

사용 padding-left:1em; text-indent:-1em에 대한 <li>태그입니다.
그런 다음, list-style-position: inside에 대한 <ul>태그입니다.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

다음 솔루션은 텍스트를 글 머리 기호에 더 가깝게 이동하거나 여러 줄의 텍스트가있는 경우에도 잘 작동 합니다.

margin-right 글 머리 기호 가까이로 텍스트를 이동할 수 있습니다

text-indent 여러 줄의 텍스트가 여전히 올바르게 정렬되도록합니다.

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

<span style="display: flex;">각각 내부에 사용하십시오 <li>.