html - type - ordered list中文




HTML列表樣式類型的短劃線 (11)

有沒有一種方法可以用短劃線(即 - 或 - –或 - — )在HTML中創建列表樣式

<ul>
  <li>abc</li>
</ul>

輸出:

- abc

發生在我身上的是像li:before { content: "-" };這樣的東西li:before { content: "-" }; ,儘管我不知道這個選項的缺點(並且非常有責任提供反饋)。

更一般地說,我不介意知道如何為列表項目使用通用字符。


CSS:

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

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

以下是沒有任何相對或絕對位置且沒有文本縮進的版本:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

請享用 ;)


使用dl (definition list) and dd來代替使用lu li。 <dd>可以使用標準css風格(如{color:blue;font-size:1em;}並使用標記作為標記放置在html標記之後的任何符號。 它的工作原理與ul li類似,但允許使用任何符號,只需將其縮進即可獲得通常用ul li獲取的縮進列表效果。

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

給你更清潔的代碼! 這樣,你可以使用任何類型的字符作為標記! 縮進約為-10px ,它的工作原理非常完美!


其他方式:

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;    
}

對我有效的是

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

對於今天有這個問題的人來說,解決方案很簡單:

列表樣式:“ - ”


我的解決方案是在mdash中添加額外的span標籤:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

並添加到CSS:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

有一個簡單的修復(文本縮進)來保持縮進列表效果: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 {
  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;
}

```

https://codepen.io/burningTyger/pen/dNzgrQ


這是我的fiddle版本:

(modernizr)類。 <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;
}

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}






html-lists