목록 항목에서 글 머리 기호와 텍스트 사이의 간격
글 머리 기호와 사용 가능한 텍스트 사이의 기본 <li>간격을 유지합니까?
- 항목 1
- 항목 2
- 항목 3
총알과 "I"사이의 간격을 추가합니다.
이것이 최선의 방법인지 확실하지 않지만 네거티브를 믿을 수 있습니다 .text-indent
li {
text-indent: -4px;
}
... HTML 코드는 다음과 가변합니다.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
(Safari 4.0.4 및 Firefox 3.0.11에서 테스트되었습니다.)
은을 설정 당신하여이를 달성 할 수 list-style-type로 none하고, 설정 background-image과 같이, 일반 총알에 목록 요소를 :
ul {
list-style-type: none;
}
li {
background-image: url(bullet.jpg);
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 7px;
}
결과는 다음과 같을 것입니다.
접근 방식을이 사용하면 span목록에 불필요한 (또는 기타)를 요소 추가하지 않습니다 . 이것은 아마도 더 실용적입니다 (나중의 확장 성 및 기타 의미 론적 M).
다음을 시도해 볼 수 있습니다. 그러나 그것은 요구하는 것을 요구하는 <span>내부 요소 <li>요소
<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;
}
</style>
</head>
<body>
<ul class="a">
<li><span>Coffee</span></li>
<li><span>Tea</span></li>
<li><span>Coca Cola</span></li>
</ul>
</body>
</html>
실제로 작동하지 않는 방법을 작동하지 않는 것입니다. 즉, 총알을 제거하고 : before 의사 요소를 사용하여 유니 코드 총알을 삽입하는 것입니다. 그 장소. 그런 다음 목록 항목과 글 머리 기호 사이의 간격을 사용할 수 있습니다. : before 또는 : after의 콘텐츠 속성에 엔터티를 삽입 한 금액이 유니 코드를 사용합니다. HTML 엔터티가 작동하지 않습니다.
기본적으로 유니 코드 글 머리 기호가 핀 헤드의 크기를 표시하기 때문에 크기 조정 및 위치 지정 코드도 필요합니다. 따라서 총알이 제자리에 확장되고 절대 위치에 있습니다. 목록 항목의 글꼴 크기 및 설명 때 목록 항목에 대한 글 머리 기호의 관계가 일정하게 유지되는 글 머리 기호의 크기 및 위치에 ems를 사용합니다. 코드의 주석은 모든 작동 방식을 설명합니다. 다른 엔터티를 사용하는 경우 유니 코드 엔터티 목록을 사용할 수 있습니다.
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
이 페이지의 표에서 맨 오른쪽 열 (8 진수)의 값을 사용하십시오. \와 숫자 만 있으면됩니다. 사용 가능한 크기로 표시되는 것처럼 보이는 다른 엔터티를 사용할 때 : 규칙의 콘텐츠 속성을 사용하기 전에 모든 항목을 사용할 수 있습니다. 이메일을 보내주세요 : stylinwithcss 닷컴의 찰스에게 어떤 생각이나 의견도 보내주세요. Firefox, Chrome 및 Safari를 테스트하여 작동합니다.
body {
font-family:"Trebuchet MS", sans-serif;
}
li {
font-size:14px; /* set font size of list item and bullet here */
list-style-type:none; /* removes default bullet */
position:relative; /* positioning context for bullet */
}
li:before {
content:"\2219"; /* escaped unicode character */
font-size:2.5em; /* the default unicode bullet size is very small */
line-height:0; /* kills huge line height on resized bullet */
position:absolute; /* position bullet relative to list item */
top:.23em; /* vertical align bullet position relative to list item */
left:-.5em; /* position the bullet L- R relative to list item */
}
모든 li에 텍스트 행이 하나만있는 경우에 텍스트 들여 쓰기를 넣을 수 있습니다. 이렇게 :
ul {
list-style: disc;
}
ul li {
text-indent: 5px;
}
또는
ul {
list-style: disc;
}
ul li {
text-indent: -5px;
}
이것은 한 가지 방법입니다.
li span {
margin-left: -11px;
}
<ul>
<li><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
다음을 볼 수 있습니다.
li {list-style-position: inside; }
그러나이 공간은 조정하는지 또는 공간 이 발생하는 위치를 변경하는지 기억할 수 없습니다 .
수정 됨
위의 내용은 큰 차이가없는 것입니다. 방법이있을 어떤을 구석으로 같지 않습니다 감소 사이의 공간 list-style-type이 될 수 있지만,와 텍스트를 마커 증가 사용 margin-left하거나 text-indent.
더 이상 쓸모 없어서 미안 해요.
수정 됨
호기심에서 배경 이미지로 총알을 '가짜'는 것은 무엇입니까?
ul {list-style-type: none;
margin: 0;
padding: 0;
}
ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
margin: 0;
padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}
더 미세 조정이 가능할 수 있습니다.
나는이 작업을 인라인으로해야하고 위의 몇 가지 가지를 결합하여 제대로 작동했습니다. div 내부에서 작업 중이며 이미지를 사용하고 싶었습니다.
UL 아래의 패딩은 div의 왼쪽 여백에서 시작하는 위치를 총알에 알려줍니다. 더 나은 접근성 / 유연성을 위해 사용하지만 px도 사용할 수 있습니다. px로 많이 움직이지 않는 것 같으면 훨씬 더 큰 px 값을 사용하십시오 (저는 cm 단위로 움직이면 60px였습니다!).
텍스트 들여 쓰기는 글 머리 기호가 옆에있는 텍스트에 얼마나 가까운지를 알려줍니다.
그것이 당신을 위해 작동하기를 바랍니다! :)
text-indent목록 항목의 글 머리 기호와 텍스트 사이의 공간을 줄이려면 음수로 줄이십시오 .
li {
text-indent: -4px;
}
를 사용 margin-left하여 목록 항목의 글 머리 기호와 주변 요소 가장자리 사이의 간격을 수도 있습니다 .
li {
margin-left: 24px;
}
text-indent및 둘 다 글 머리 기호와 텍스트 사이 에 공백을 추가padding-left 할 수 있지만 공백 만 음수로 줄일 수 있습니다.text-indent
나는이 <a>내부 <li>의.
받는 <ul>요소, 다음과 같은 CSS를 적용 :
ul {
margin: 0;
padding: 0;
list-style: none;
}
받는 <a>요소, 다음과 같은 CSS를 적용 :
a:before {
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background: #000;
display: inline-block;
margin: 0 6px 0 0;
vertical-align: middle;
}
이 글 머리 기호에 대한 의사 요소를 만듭니다. 다른 요소와 추가 스타일을 있습니다.
여기에서 구현했습니다 : http://www.cssdesk.com/R2AvX
여기 Fiddle을 사용합니다.
깡깡이
HTML :
<ol>
<li>List 1
<ol>
<li>Sub-Chapter</li>
<li>Sub-Chapter</li>
</ol>
</li>
<li>List 2
<ol>
<li>Sub-Chapter</li>
<li>Sub-Chapter</li>
</ol>
</li>
<li>List 3</li>
</ol>
CSS :
ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}
방법은 다음과 가변합니다.
이렇게하면 여러 줄이 완벽하게 작동합니다. 글 머리 기호는 텍스트와 함께 자동으로 크기가 조정됩니다. 들여 쓰기는 간단 padding-left합니다 li.. 최소한의 CSS가 필요합니다.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul > li {
position: relative;
padding-left: 12px;
}
ul > li:before {
content: "•";
position: absolute;
left: 0;
}
div {
border: 1px solid #ccc;
}<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
<li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
<li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
</ul>
</div>내가 원하는 모양을 얻기 위해 기본 UL과 여러 LI를 포함하는 div를 만들었습니다. 위의 제안 된 아이디어 중 하나로 글 머리 기호와 텍스트 사이의 들여 쓰기를 쉽게 조정할 수 없었습니다 (기술적으로 가능하지만 간단하지는 않음). 방금 목록 기능 ( list-style-type: none) 없이 UL과 LI를 떠난 다음 •각각의 시작 부분에 a 를 추가했습니다. 선. 처음에는 약간의 문제가 생겼고 첫 번째 총알 만 표시되었으므로 첫 번째 줄 끝에 총알 문자를 추가하고 새로 고친 다음 제거하면 모두 튀어 나왔습니다. 큰 들여 쓰기를 원하지 않으면 수동으로 글 머리 기호 HTML 엔티티를 추가하고, 더 많은 공간을 원하면 공백 HTML 엔티티를 추가하십시오. o 최선의 방법이 아니라는 것을 알고 있지만 저에게 효과적이었습니다.
여기에 또 다른 방법이 있습니다.
- 각 li에 두 개의 div를 추가합니다. 하나는 글 머리 기호 용이고 다른 하나는 텍스트 용입니다.
•글 머리 기호 div에 글 머리 기호 문자 (또는 원하는대로 유니 코드에 많음)를 입력합니다. 텍스트 div에 텍스트를 넣으십시오.- 각 li를
display:flex.
장점 :
- 추가 할 추가 글 머리 기호 이미지가 없습니다.
- 마이너스 여백이나 그 어떤 것도 부모를 벗어나지 않습니다.
- Flexbox를 지원하는 모든 브라우저에서 작동합니다.
- 여러 줄 항목의 적절한 들여 쓰기.
- 글 머리 기호 문자를 사용하면 글 머리 기호가 항상 텍스트와 수직으로 올바르게 정렬되며 조정할 필요가 없습니다.
단점 :
- 추가 요소가 필요합니다.
또한 모든 추가 div를 코딩하지 않으려면 일반 목록을 만든 다음이 함수를 실행하여 변환 ul하고 매개 변수로 전달 하면됩니다.
function fixList (theList) {
theList.find('li').each(function (_, li) {
li = $(li);
$('<div/>').html(li.html()).appendTo(li.empty());
$('<div/>').text('•').prependTo(li);
});
}
예:
li {
font-family: sans-serif;
list-style-type: none;
display: flex;
}
li > div:first-child {
margin-right: 0.75ex; /* set to desired spacing */
}<ul>
<li><div>•</div><div>First list item.</div>
<li><div>•</div><div>Second list item.<br>It's on two lines.</div>
<li><div>•</div><div>Third <i>list</i> item.</div>
</ul>다음은 함수를 사용하는 예입니다.
fixList($('ul'));
function fixList (theList) {
$('li', theList).each(function (_, li) {
li = $(li);
$('<div/>').html(li.html()).appendTo(li.empty());
$('<div/>').text('•').prependTo(li);
});
}li {
font-family: sans-serif;
list-style-type: none;
display: flex;
}
li > div:first-child {
margin-right: 0.75ex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>First list item.
<li>Second list item.<br>It's on two lines.
<li>Third <i>list</i> item.
</ul>'ProgramingTip' 카테고리의 다른 글
| SQL-Server에 백분율 값을 저장하는 가장 좋은 방법은 무엇입니까? (0) | 2020.11.27 |
|---|---|
| .Net에서 개발 한 Windows 서비스 설치 오류 (0) | 2020.11.27 |
| WPF TextBlock에 명령을 추가하는 방법은 무엇입니까? (0) | 2020.11.26 |
| SignalR + 작업 방법을 통해 허브에 메시지 게시 (0) | 2020.11.26 |
| curl.h 해당 파일 또는 디렉토리 없음 (0) | 2020.11.26 |