: : :

source

: : :

manycodes 2023. 9. 28. 08:36

:

이 를 으로 밀어내는지 <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다에 할 수 있습니다.leftspan.

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셀, ems는 합니다를

단점:

페이지에 작은 이미지 파일을 추가하여 페이지 무게를 늘립니다.
사용자가 브라우저에서 텍스트 크기를 늘리면 글머리 기호는 원래 크기로 유지됩니다.또한 텍스트 크기가 증가함에 따라 위치가 더 멀어질 가능성이 있습니다.
폭에 대한 백분율만을 사용하여 '응답형' 레이아웃을 개발하는 경우 화면 폭 범위에서 원하는 위치에 총알을 정확하게 맞추기가 어려울 수 있습니다.

합니다에 을 입히세요.<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>이 이 수 다른 사람이 이 문제를 해결할 방법이 있을 수도 있습니다.
총알은 텍스트와 다른 색일 수 있습니다.
사용자가 텍스트 크기를 늘린 경우 글머리 기호는 비례하여 축척되어야 합니다(padding & margin(padding & margin을 px가 아닌 항목으로 설정할 경우).

단점:

추가적인 의미 없는 요소가 필요합니다. (실생활보다 SO에서 더 많은 친구를 잃게 될 수도 있습니다;) 그러나 코드가 최대한 희박하고 효율적인 것을 좋아하는 사람들은 짜증이 나며 HTML/CSS가 제공하기로 되어 있는 프레젠테이션과 콘텐츠의 분리를 위반합니다.)
탄알의 크기와 모양에 대한 통제가 없음

여기 CSS4의 새로운 목록 스타일 기능을 기대하고 있습니다. 이미지나 추가 마크업에 의존하지 않고 더 똑똑한 총알을 만들 수 있습니다. :)

이거면 돼요.총알은 반드시 밖으로 향하도록 하세요.IE7에서 아래로 떨어뜨릴 수 있다면 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>

를 .padding-left목록 항목에 속성을 지정합니다(목록 자체에는 없음!).

오래된 질문이지만 :fore 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>

건배!

list-style-type:inline:

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

당신은 단지.

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

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

건배.

글머리 기호와 글머리 기호 사이의 간격만 줄이려면 훨씬 더 깨끗한 해결책이 있을 것 같습니다.

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

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
    }

공백이 목록 요소의 첫 줄에만 영향을 미치도록(목록 요소가 한 줄 이상인 경우) 분할 가능하지 않은 공백을 사용합니다.대신에 여기 패딩을 이용하시면 됩니다.

텍스트 독립을 사용하는 것이 가장 좋습니다.

text-indent: -xpx;는 총알을 리와 그 반대 versa에 가깝게 이동시킵니다.

상대적인 음의 범위를 사용하는 것은 IE의 이전 버전에서는 제대로 작동하지 않을 수 있습니다. 추신- 가능한 한 자리를 주지 마십시오.

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

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>

오래된 질문이지만 여전히 관련이 있습니다.나는 네거티브를 사용하는 것을 추천합니다. 반드시.outside.

장점:

탄창이 자동으로 올바르게 위치함
글꼴 크기를 변경해도 글머리 기호 위치가 깨지지 않습니다.
추가 요소 없음(아니오 :: 의사 요소도 있음)
CSS 변경 없이 RTL과 LTR 모두에서 작동합니다.

단점:

해라
로.
찾아내다
하나 :)

<li> 태그의 패딩을 이용하여 간격을 조절할 수 있을 것 같습니다.

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

단점은 그것이 당신의 마지막 예처럼 그것을 아주 잘 해내는 것을 허락하지 않는 것 같다는 것입니다.

목록 스타일 유형을 해제하고 •을 사용해 보십시오.

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

정렬되지 않은 목록은 ult 태그로 시작합니다.각 목록 항목은 목록 항목이 기본적으로 탄환(작은 검은색 원)으로 표시됩니다.

    <!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>

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

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

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

이 질문에 대한 답변 보기

당신은 그냥 당신에게 줄수 있습니다.padding-lefto대로<li>요소.

추가 마크업을 추가하지 않는 것이 좋다면, 예를 들어,<span>, 다음을 사용할 수 있습니다.

list-style-position: inside; 스타일을
을 좀 더 하는 에는 할 수 있습니다.::beforeli텍스트를 총알 쪽으로 이동시키는 요소입니다.

    ul {
        list-style-type: disc;
        list-style-position: inside;
        padding-left: 16px; /* or margin */
    }

    li::before {
        content: '';
        margin-left: -8px;
    }

리스트항목텍스트
리스트항목텍스트
리스트항목텍스트
리스트항목텍스트

ul
{
list-style-position:inside;
}

정의 및 용도

list-style-position 속성은 list-item 마커가 내용 흐름의 내부 또는 외부에 나타나야 하는지를 지정합니다.

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

3개 학교에 대한 더 많은 정보가 있습니다.list-style: none;}

::{ 이전:{ }content: "\2022"; color: black; display: inline-block; width: 8px;}

아무도 언급하지 않았습니다 ::marker 속성

브라우저 기본값보다 작은 공간을 설정할 수 있습니다.

ul li::marker {
  content: '•'; /* as a side effect sets the space to zero */
  font: 1.2em/1 sans-serif; /* adjust the bullet size */
}
ul li {
  padding-left: .2em; /* have full control over the bullet space */
}

<ul>
  <li>one
  <li>two
  <li>three
</ul>

합니다.ul li:before를 할당합니다.position: relative그리고.position:absoluteli그리고.li:before각각 다음과 같다.이렇게 하면 이미지를 만들고 원하는 곳에 원하는 위치에 이미지를 배치할 수 있습니다.

사용하다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>

목록 스타일이 다음과 같은 경우inside총알을 제거하고 자신만의... 예를 들어 (scss!)

            li {
                list-style: none;
                &:before {
                    content: '- ';
                }
            }

하면 하면입니다.outside그러면 당신은 다음과 같은 일을 할 수 있습니다.

            li { 
                padding-left: 10px;
                list-style: none;
                &:before {
                    content: '* '; /* use any character you fancy~! */
                    position: absolute;
                    margin-left: -10px;
                }
            }

대부분의 사람들이 우리에게 손을 내미는 것은 흥미로운 일입니다.margin,padding및/position이와 같은 문제에 직면했을 때의 속성.과거에 그랬다는 것을 압니다.잘못 보고 있으면 어쩌죠?

다른 솔루션을 제공하기 전에 브라우저 구현을 좀 더 잘 이해해 보겠습니다.WebKit의 목록에 대한 사용자 에이전트 스타일시트를 살펴보면 다음과 같습니다.

ul, menu, dir {
    //...
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}

ol {
    //...
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}
li {
    display: list-item;
    text-align: match-parent;
}

다른 브라우저들도 비슷합니다.됩니다.ul그리고.ol, , li 들어간 부분이에도 없다는 것입니다 또한 주목할 점은 부정적인 위치, 여백, 움푹 들어간 부분이 어디에도 없다는 것입니다.그렇다면 글과 글 사이에 그 간극을 만들어 내는 것은 무엇일까요?

총알 캐릭터 자체를 바꾸려고 해봐야 답이 명확해집니다..list-style-type산,신과 같은 을 주는 위한 .disc(어떤 것의 정의는 브라우저에 달려 있으며 사양이 조금 모호합니다) 인용 문자열 값을 제공합니다.

ul {
   list-style-type: "•";
}

<ul>
   <li>Oh dear</li>
   <li>what happened</li>
   <li>to the bullet spacing?</li>
</ul>

총알 뒤에 표준 공백 문자를 추가하면 간격을 다시 도입할 수 있습니다."

ul.custom-bulleted {
   list-style-type: "• ";
}

<ul class="custom-bulleted">
   <li>Ah, that's better.</li>
   <li>I've never cared for sticky bullets.</li>
</ul>

<ul>
   <li>I'm an unstyled list.</li>
   <li>I never have that problem!</li>
</ul>

할 수 밖에 없습니다. 뒤에 를 각 입니다의 것입니다. 글머리 기호 뒤에 공백을 삽입하고 전체를 각각의 왼쪽 바로 위에 띄웁니다.li. 실제로 사양은 기본 내부 구현을 자체 목록 유형을 정의할 수 있는 at-rule과 비교함으로써 이를 거의 확인할 수 있습니다.

다음 스타일시트 조각은 미리 정의된 카운터 스타일의 표준 정의를 제공합니다.
@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

.suffix.

한 바로 입니다. 없는 는 무엇입니까?custom-bulleted예를 들어 수업?다시 말하지만, 그것은 각 브라우저의 다른 내부 구현으로 귀결되는 것 같습니다.서로 다른 브라우저에서 비교해보면 사용자 지정 글머리표도 브라우저마다 다릅니다.하지만 제가 발견한 것은 당신이 끈의 모양을 표준화할 수 있다는 것입니다.list-style-type a를 font-family, 이 질문이 처음에 주어졌을 때 사용할 수 없었던 기능입니다.

으로 돌아가서,과 , ,li, 공백 문자의 너비를 변경하거나 문자열 기반을 사용하여 여러 공백 문자를 추가하여 브라우저를 넓게 지원할 수 있습니다.또는 를 사용하여 사용자 지정 목록 스타일을 정의할 수도 있지만 현재 Safari에서는 지원되지 않습니다.

유니코드는 다양한 공백 문자를 선택할 수 있습니다.Em Space(U+2003)를 사용하는 목록은 다음과 같습니다.

ul {
   list-style-type: "•\002003";
}

<ul>
   <li>I like big gaps and I cannot lie</li>
   <li>You other brothers can't deny</li>
</ul>

저는 이 접근법이 처음으로 떠오르는 것이 아니라는 것을 압니다.우리는 마진, 패딩, 움푹 패인 부분을 조정하는 데 너무 익숙했기 때문에 매번 이러한 도구를 손에 넣기 쉽습니다.그러나 여러 면에서 브라우저의 방식은 일리가 있습니다.보다 더 것은 입니까?ul 처리되도록 말인가요 요?는, 는,li::marker가짜 element는 더 세밀한 통제가 필요하다고 생각하는 사람들에게 패딩을 지원할 것입니다.그래도 숨을 죽이고 있지는 않을 겁니다.)

이 질문은 12년 전에 질문을 받았기 때문에 아무도 신경 쓰지 않을 것이라고 99.9999% 확신합니다. 하지만 저는 지금 이 문제를 해결해야 했습니다. 그리고 제가 찾은 것은 다음과 같습니다.

후행 공간은 탈출의 일부로 취급되므로 탈출한 캐릭터를 실제로 따라다니려면 공백을 2개 사용합니다.

그리고, 정말로, 효과가 있습니다.

ul.asterisks {
  list-style-type: '\2731\ ';
}

출처 : 마크업 및 CSS에서 문자 이스케이프 사용

P.S. 너무 오래해서 정신이 없어서 그런가요?공백 삽입은 브라우저의 개발 보기에서 작동합니다.공간을 확보하기 위해서는... 탈출해야 했습니다.공간들 ?(위 참조)매드니스. (BTW, 이 페이지들은 왜 2010년 것들입니까?2010년에 무슨 일이 있었습니까?잠깐만...12년 전은... 2010년입니다. :

출처: CSS 문자 탈출 시퀀스

CSS 속성 padding-inline-start를 사용할 수 있습니다.

li { 
    padding-inline-start: 1em;
}

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

'source' 카테고리의 다른 글

Oracle to_date 함수 테스트 (0)	2023.09.28
XAMPP 폴더에서 MySQL 데이터베이스 테이블의 정확한 위치는 무엇입니까? (0)	2023.09.28
도커 컨테이너의 파일 시스템 탐색 (0)	2023.09.28
mysql 명령줄에 .my.cnf 제공 (0)	2023.09.28
jshint는 Angular를 이해합니까? (0)	2023.09.28

현재글: : :

각종 프로그래밍 정보를 다루는 블로그입니다.

Git, angularJS, MySQL, MongoDB, WPF, Java, Wordpress, jQuery, JavaScript, Oracle, spring-boot, Python, Excel, mariadb, C, JSON, angular, ASP.NET, reactjs, php,

Today :
Yesterday :

manycodes

: : :

:

아무도 언급하지 않았습니다 ::marker 속성

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

: : :

:

아무도 언급하지 않았습니다 ::marker 속성

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바