HTML 목록 스타일 형식 대시
대시 (예 :-또는 – –또는 — —) 를 사용하여 HTML로 목록 스타일을 만드는 방법이 있습니까?
<ul>
<li>abc</li>
</ul>
출력 :
- abc
이 같은이 작업을 수행하기 위해 나에게 발생있어 li:before { content: "-" };나는 그 옵션의 단점을 모르는 (그리고 많은 피드백을 위해 의무가 될 것이다)하지만,.
더 일반적으로, 나는 목록 항목에 일반 문자를 사용하는 방법을 알고 싶지 않습니다.
당신은 사용할 수 있습니다 :before및 content:이 아래 IE 7에서 지원되지 않는다는 것을 명심. 괜찮다면 이것이 최선의 해결책입니다. 자세한 내용은 Can I Use 또는 QuirksMode CSS 호환성 표를 참조하십시오.
구형 브라우저에서 작동해야하는 약간 더 나쁘지 않은 솔루션은 글 머리 기호로 이미지를 사용하고 이미지를 대시처럼 보이게 만드는 것입니다. 예제 는 W3C list-style-image페이지 를 참조하십시오 .
:before의사 클래스로 들여 쓰기 된 목록 효과를 유지하기위한 쉬운 수정 (텍스트 들여 쓰기)이 있습니다.
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed > li {
text-indent: -5px;
}
ul.dashed > li:before {
content: "-";
text-indent: -5px;
}Some text
<ul class="dashed">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Last text상대 또는 절대 위치가없고 텍스트 들여 쓰기가없는 버전이 있습니다.
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
즐겨 ;)
이것을 사용하십시오 :
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
데모 바이올린
내 자신의 선호하는 솔루션을 다시 찾기 위해 내 버전도 추가하겠습니다.
ul {
list-style-type: none;
/*use padding to move list item from left to right*/
padding-left: 1em;
}
ul li:before {
content: "–";
position: absolute;
/*change margin to move dash around*/
margin-left: -1em;
}<!--
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash'
Give credit and enjoy!
-->
Some text
<ul>
<li>One</li>
<li>Very</li>
<li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Approach!</li>
</ul>https://codepen.io/burningTyger/pen/dNzgrQ
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
내 경우에는이 코드를 CSS에 추가
ul {
list-style-type: '- ';
}
충분했다. 그대로 간단합니다.
내 바이올린 버전 은 다음과 같습니다 .
실제로 (modernizr) 클래스 .generatedcontent는 <html>실제로 IE8 + 및 다른 모든 제정신 브라우저를 의미합니다.
<html class="generatedcontent">
<ul class="ul-dash hanging">
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
</ul>
CSS :
.ul-dash {
margin: 0;
}
.ul-dash {
margin-left: 0em;
padding-left: 1.5em;
}
.ul-dash.hanging > li { /* remove '>' for IE6 support */
padding-left: 1em;
text-indent: -1em;
}
.generatedcontent .ul-dash {
list-style: none;
}
.generatedcontent .ul-dash > li:before {
content: "–";
text-indent: 0;
display: inline-block;
width: 0;
position: relative;
left: -1.5em;
}
I do not know if there is a better way, but you can create a custom bullet point graphic depicting a dash, and then let the browser know you want to use it in your list with the list-style-type property. An example on that page shows how to use a graphic as a bullet.
I have never tried to use :before in the way you have, although it may work. The downside is that it will not be supported by some older browsers. My gut reaction is that this is still important enough to take into consideration. In the future, this may not be as important.
EDIT: I have done a little testing with the OP's approach. In IE8, I couldn't get the technique to work, so it definitely is not yet cross-browser. Moreover, in Firefox and Chrome, setting list-style-type to none in conjunction appears to be ignored.
My solution is in adding extra span tag with mdash in it:
<ul class="mdash-list">
<li><span class="mdash-icon">—</span>ABC</li>
<li><span class="mdash-icon">—</span>XYZ</li>
</ul>
and adding to css:
ul.mdash-list
{
list-style:none;
}
ul.mdash-list li
{
position:relative;
}
ul.mdash-list li .mdash-icon
{
position:absolute;
left:-20px;
}
Instead of using lu li, used dl (definition list) and dd. <dd> can be defined using standard css style such as {color:blue;font-size:1em;} and use as marker whatever symbol you place after the html tag. It works like ul li, but allows you to use any symbol, you just have to indent it to get the indented list effect you normally get with ul li.
CSS:
dd{text-indent:-10px;}
HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
Gives you much cleaner code! That way, you could use any type of character as marker! Indent is of about -10px and it works perfect!
Another way:
li:before {
content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
list-style: none;
text-indent: -1.5em;
padding-left: 1.5em;
}
CSS:
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
One of the top answers did not work for me, because, after a little bit trial and error, the li:before also needed the css rule display:inline-block.
So this is a fully working answer for me:
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
For anyone having this problem today, the solution is simply:
list-style: "- "
What worked for me was
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
참고URL : https://stackoverflow.com/questions/3200249/html-list-style-type-dash
'Programing' 카테고리의 다른 글
| Selenium WebDriver에서 JavaScript를 사용하여 XPath로 요소를 얻는 방법이 있습니까? (0) | 2020.05.01 |
|---|---|
| nginx-nginx : [emerg] bind () ~ [::] : 80 실패 (98 : 이미 사용중인 주소) (0) | 2020.05.01 |
| 오류 코드 : 2013. 쿼리 중 MySQL 서버 연결이 끊어졌습니다 (0) | 2020.05.01 |
| Eclipse CDT에서 C ++ 11 / C ++ 0x 지원을 활성화하는 방법은 무엇입니까? (0) | 2020.05.01 |
| Mac OS X 터미널 : 맵 옵션 + 삭제를 "뒤로 삭제 단어"로 (0) | 2020.05.01 |