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

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

---

글 머리 기호 <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에 더 가깝게 이동시키고 그 반대도 마찬가지입니다.

Using relative on span the negative left might not work properly with older versions for IE. P.S- avoid giving positions as much as you can.

---

Here is another solution using css counter and pseudo elements. I find it more elegant as it doesn't require use of extra html markup nor css classes :

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
}

I use non breakable spaces so that the spacing only affects the first line of my list elements (if the list element is more than one line long). You could use padding here instead.

---

An unordered list starts with the ul tag. Each list item starts with the The list items will be marked with bullets (small black circles) by default:

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

Output:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

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

</body>
</html>

The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

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

---

Old question but still relevant. I recommend using negative text-indent. list-style-position must be outside.

Pros:

• Bullet is properly automatically positioned
• Change font size does not break the bullet position
• No extra elements ( no ::pseudo-elements too )
• Works for both RTL and LTR without change in CSS.

Cons:

• try
• to
• find
• one :)

---

You can also use a background image replacement as an alternative, giving you total control over vertical and horizontal positioning.

See the answer to this Question

---

ul
{
list-style-position:inside;
} 

Definition and Usage

The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.

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

---

There seems to be a much cleaner solution if you only want to reduce the spacing between the bullet point and the text:

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

---

It seems you can (somewhat) control the spacing using padding on the <li> tag.

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

The catch is that it doesn't seem to allow you to scrunch it way-snug like your final example.

For that you could try turning off list-style-type and using &bull;

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

---

You can use ul li:before and a background image, and assign position: relative and position:absolute to the li and li:before, respectively. This way you can create an image and position it wherever you want relative to the li.

---

use <span style="display: flex;"> inside each <li>.

참고URL : https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li