用短横线实现行内列表样式

huangapple
go评论94阅读模式
英文:

Inline list-style-type with dash

问题

需要编写带有破折号的内联列表样式。

这个有效：

  1. '<ul><li style="list-style-type: &#39;-&#39;"> text </li></ul>'

但我使用XtraReport，那里不起作用。必须在开头和结尾加上引号&#39;。

我编辑了问题。

英文:

I need to write Inline list-style-type with dash.

this works:

  1. &#39;&lt;ul&gt;&lt;li style=&quot;list-style-type: &#39;-&#39; &quot;&gt; text &lt;/li&gt;&lt;/ul&gt;&#39;

But I use XtraReport and there it doesnt. There has to be quotation mark ' at the begining and at the end.

I edited the question.

答案1

得分: 1

Use ' for inside the inline, to avoid confusion to closing style property.

Also, close <li> tag first before closing <ul> tag.

So, instead of:

  1. <ul><li style="list-style-type: "- ";"> text </ul></li>

use:

  1. <ul><li style="list-style-type: '&#39;-&#39;;"> text </li></ul>
英文:

Use ' for inside the inline, to avoid confusion to closing style property.

Also, close &lt;li&gt; tag first before closing &lt;ul&gt; tag.

So, instead of:

  1. &lt;ul&gt;&lt;li style=&quot;list-style-type: &quot;- &quot;;&quot;&gt; text &lt;/ul&gt;&lt;/li&gt;

use:

  1. &lt;ul&gt;&lt;li style=&quot;list-style-type: &#39;- &#39;;&quot;&gt; text &lt;/li&gt;&lt;/ul&gt;

答案2

得分: 0

  • – 项目 1
  • – 项目 2
  • – 项目 3

"添加了样式属性到<ul>元素，通过设置list-style-type: none来去除默认的项目符号，并添加了一些额外的样式来去除任何默认的填充。

每个列表项<li>具有display: inline属性，使它们呈现为内联，并且设置了list-style-type: none属性来去除任何默认的项目符号。

在每个列表项内，使用了"&ndash; HTML实体"来表示破折号字符。"

英文:

<ul style="list-style-type: none; padding: 0;">
<li style="display: inline; list-style-type: none;">
<span>&ndash; Item 1</span><br>
</li>
<li style="display: inline; list-style-type: none;">
<span>&ndash; Item 2</span><br>
</li>
<li style="display: inline; list-style-type: none;">
<span>&ndash; Item 3</span><br>
</li>
</ul>

  1. &quot;&lt;ul style=&quot;list-style-type: none; padding: 0;&quot;&gt;
  2.   &lt;li style=&quot;display: inline; list-style-type: none;&quot;&gt;
  3.     &lt;span&gt;&amp;ndash; Item 1&lt;/span&gt;&lt;br&gt;
  4.   &lt;/li&gt;
  5.   &lt;li style=&quot;display: inline; list-style-type: none;&quot;&gt;
  6.     &lt;span&gt;&amp;ndash; Item 2&lt;/span&gt;&lt;br&gt;
  7.   &lt;/li&gt;
  8.   &lt;li style=&quot;display: inline; list-style-type: none;&quot;&gt;
  9.     &lt;span&gt;&amp;ndash; Item 3&lt;/span&gt;&lt;br&gt;
  10.   &lt;/li&gt;
  11. &lt;/ul&gt;
  12. &quot;

added the style attribute to the <ul> element to remove the default bullet points by setting list-style-type: none and added some additional styling to remove any default padding using padding

Each list item "(<li>)" has the display: inline property to make them appear inline, and the list-style-type: none property is set to remove any default list-style-type.

Inside each list item, the &quot;&amp;ndash; HTML entity&quot; is used to represent the dash character.

答案3

得分: 0

Try this code, it is working.

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;style&gt;
  4. ul.dash-list {
  5.     list-style-type: none;
  6.   }
  7. ul.dash-list li::before {
  8.     content: &quot;-&quot;
  9.     margin-right: 5px;
  10.   }
  11. &lt;/style&gt;
  12. &lt;/head&gt;
  13. &lt;body&gt;
  16. &lt;ul class=&quot;dash-list&quot;&gt;
  17.   &lt;li&gt;第一项 &lt;/li&gt;
  18.   &lt;li&gt;第二项&lt;/li&gt;
  19.   &lt;li&gt;第三项&lt;/li&gt;
  20. &lt;/ul&gt;
  23. &lt;/body&gt;
  24. &lt;/html&gt;
英文:

Try this code, it is working.

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;style&gt;
  4. ul.dash-list {
  5.     list-style-type: none;
  6.   }
  7. ul.dash-list li::before {
  8.     content: &quot;-&quot;;
  9.     margin-right: 5px;
  10.   }
  11. &lt;/style&gt;
  12. &lt;/head&gt;
  13. &lt;body&gt;
  16. &lt;ul class=&quot;dash-list&quot;&gt;
  17.   &lt;li&gt;First item &lt;/li&gt;
  18.   &lt;li&gt;Second item&lt;/li&gt;
  19.   &lt;li&gt;Third item&lt;/li&gt;
  20. &lt;/ul&gt;
  23. &lt;/body&gt;
  24. &lt;/html&gt;

Thanks

huangapple
  • 本文由 发表于 2023年6月15日 16:17:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76480464.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定