blocks|key|538946|text|您可能想尝试img标记，而不是设置'list-style-image‘属性。使用css设置宽度和高度实际上会裁剪图像。但是如果你使用img标签，图像将被重新调整为宽度和高度的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|538947|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.</p>


blocks|key|755629|text|我会使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|755630|li+{
++list-style:+none;
}
li::before+{
++content:+'';
++display:+inline-block;
++height:+y;
++width:+x;
++background-image:+url();
}|code-block|syntax|javascript|755631|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'd use:</p>
<pre class="lang-css prettyprint-override"><code>li {
  list-style: none;
}
li::before {
  content: '';
  display: inline-block;
  height: y;
  width: x;
  background-image: url();
}
</code></pre>


blocks|key|755771|text|我使用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|755772|​|755773|li+{
	margin:+0;
	padding:+36px+0+36px+84px;
	list-style:+none;
	background-image:+url("../../images/checked_red.svg");
	background-repeat:+no-repeat;
	background-position:+left+center;
	background-size:+40px;
}|code-block|syntax|javascript|755774|755775|其中background-size设置背景图像的大小。|755776|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I'm using:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>li {
	margin: 0;
	padding: 36px 0 36px 84px;
	list-style: none;
	background-image: url("../../images/checked_red.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px;
}</code></pre>
</div>
</div>
</p>

<p>where background-size set the background image size.</p>


blocks|key|755678|text|感谢Chris在这里的一个改进，它解决了所用图像的大小调整问题，使用first-child只是为了表明你可以使用列表中的各种图标来给你完全的控制权。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|755679|ul+li:first-child:before+{
++content:+'';
++display:+inline-block;
++height:+25px;
++width:+35px;
++background-image:+url('../images/Money.png');
++background-size:+contain;
++background-repeat:+no-repeat;
++margin-left:+-35px;
}|code-block|syntax|javascript|755680|这似乎在所有现代浏览器中都工作得很好，你需要确保宽度和负边距具有相同的值，希望它能有所帮助|755681|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Thanks to Chris for the starting point here is a improvement which addresses the resizing of the images used, the use of first-child is just to indicate you could use a variety of icons within the list to give you full control.</p>
<pre class="lang-css prettyprint-override"><code>ul li:first-child:before {
  content: '';
  display: inline-block;
  height: 25px;
  width: 35px;
  background-image: url('../images/Money.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -35px;
}
</code></pre>
<p>This seems to work well in all modern browsers, you will need to ensure that the width and the negative margin left have the same value, hope it helps</p>


blocks|key|539006|text|几乎就像作弊一样，我只是进入一个图像编辑器，将图像大小调整了一半。对我来说很有吸引力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|539007|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Almost like cheating, I just went into an image editor and resized the image by half.  Works like a charm for me.</p>


blocks|key|755787|text|.your_class+li+{
++list-style-image:+url('../images/image.svg');
}

.your_class+li::marker+{
++font-size:+1.5rem;+/*+You+can+use+px,+but+I+think+rem+is+more+respecful+*/
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|755788|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-css prettyprint-override"><code>.your_class li {
  list-style-image: url('../images/image.svg');
}

.your_class li::marker {
  font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}
</code></pre>


blocks|key|539128|text|我用Bootstrap和Javascript做了一种终端模拟器，因为我需要一些动态的东西来轻松地添加新项，然后我输入了Javascript的提示符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|539129|HTML：|539130|++<div+class="panel+panel-default">
++++++<div+class="panel-heading">Comandos+SQL+ejecutados</div>
++++++<div+class="panel-body+panel-terminal-body">
++++++++++<ul+id="ulCommand"></ul>
++++++</div>
+</div>|code-block|syntax|javascript|539131|Javascript|539132|function+addCommand(command){
++++//Creating+the+li+tag+++
++++var+li+=+document.createElement('li');
++++//Creating++the+img+tag
++++var+prompt+=+document.createElement('img');
++++//Setting+the+image+
++++prompt.setAttribute('src','./lib/custom/img/terminal-prompt-white.png');
++++//Setting+the+width+(like+the+font)
++++prompt.setAttribute('width','15px');
++++//Setting+height+as+auto
++++prompt.setAttribute('height','auto');
++++//Adding+the+prompt+to+the+list+item
++++li.appendChild(prompt);
++++//Creating+a+span+tag+to+add+the+command
++++//li.appendChild('el+comando');+++por+que+no+es+un+nodo
++++var+span+=+document.createElement('span');
++++//Adding+the+text+to+the+span+tag
++++span.innerHTML+=+command;
++++//Adding+the+span+to+the+list+item
++++li.appendChild(span);
++++//At+the+end,+adding+the+list+item+to+the+list+(ul)
++++document.getElementById('ulCommand').appendChild(li);
}|539133|CSS|539134|.panel-terminal-body+{
++background-color:+#423F3F;
++color:+#EDEDED;
++padding-left:+50px;
++padding-right:+50px;
++padding-top:+15px;
++padding-bottom:+15px;
++height:+300px;
}

.panel-terminal-body+ul+{
++list-style:+none;
}|539135|我希望这对你有帮助。|539136|entityMap^0|2|9|C|A|1N|A|0|0|4|0|0|0|A|0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1H|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|X|$]]

<p>I did a kind of terminal emulator with <code>Bootstrap</code> and <code>Javascript</code> because I needed some dynamic to add easily new items, and I put the prompt from <code>Javascript</code>.</p>

<p><code>HTML</code>:  </p>

<pre><code>  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Comandos SQL ejecutados&lt;/div&gt;
      &lt;div class="panel-body panel-terminal-body"&gt;
          &lt;ul id="ulCommand"&gt;&lt;/ul&gt;
      &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p><code>Javascript</code>:</p>

<pre><code>function addCommand(command){
    //Creating the li tag   
    var li = document.createElement('li');
    //Creating  the img tag
    var prompt = document.createElement('img');
    //Setting the image 
    prompt.setAttribute('src','./lib/custom/img/terminal-prompt-white.png');
    //Setting the width (like the font)
    prompt.setAttribute('width','15px');
    //Setting height as auto
    prompt.setAttribute('height','auto');
    //Adding the prompt to the list item
    li.appendChild(prompt);
    //Creating a span tag to add the command
    //li.appendChild('el comando');   por que no es un nodo
    var span = document.createElement('span');
    //Adding the text to the span tag
    span.innerHTML = command;
    //Adding the span to the list item
    li.appendChild(span);
    //At the end, adding the list item to the list (ul)
    document.getElementById('ulCommand').appendChild(li);
}
</code></pre>

<p><code>CSS</code>:</p>

<pre><code>.panel-terminal-body {
  background-color: #423F3F;
  color: #EDEDED;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 300px;
}

.panel-terminal-body ul {
  list-style: none;
}
</code></pre>

<p>I hope this help you.</p>


<p>I'm trying to set custom SVG icons with CSS on a <code>&lt;ul&gt;</code>'s list items. Example:</p>

<pre><code>&lt;ul&gt;
    &lt;li style="list-style-image: url('first.svg')"&gt;This is my first item&lt;/li&gt;
    &lt;li style="list-style-image: url('second.svg')"&gt;And here's my second&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The problem is that the the images are too large, and stretch the height of the lines. I don't want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of <code>background-image</code> hack?</p>

<p>EDIT: Here's a preview (large image deliberately chosen for illustration and drama): <a href="http://jsfiddle.net/tWQ65/4/" rel="noreferrer">http://jsfiddle.net/tWQ65/4/</a> <br>
And my current <code>background-image</code> workaround, using CSS3's <code>background-size</code>: <a href="http://jsfiddle.net/kP375/1/" rel="noreferrer">http://jsfiddle.net/kP375/1/</a></p>


CSS list-style-image size

我正在尝试在<ul>的列表项上设置自定义的SVG图标。示例：<ul>    <li style="list-style-image: url('first.svg')">This is my first item</li>    <li style="list-style-image: url('second.svg')">And here's my second</li></ul>问题是图像太大

问CSS列表样式-图像大小
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS列表样式-图像大小EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS列表样式-图像大小
EN