CSS列表样式图像大小

Question 1

我正在尝试在<ul>的列表项上使用CSS设置自定义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>

问题是图像太大，并且拉伸了线条的高度。我不想更改图像大小，因为使用SVG的目的是根据分辨率进行缩放。有没有一种方法可以使用CSS设置图像的大小，而无需进行任何改动background-image？

编辑：这是预览（故意为插图和戏剧选择大图像）：http : //jsfiddle.net/tWQ65/4/
和我当前的background-image解决方法，使用CSS3 background-size：http : //jsfiddle.net/kP375/1/

Question 2

您可能想尝试使用img标签，而不是设置“ list-style-image”属性。使用CSS设置宽度和高度实际上会裁剪图像。但是，如果使用img标签，则图像将被调整为宽度和高度的值。

Question 3

我会用：

li{
   list-style: none;
}
li::before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}

Question 4

我正在使用：

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

展开摘要

其中background-size设置背景图像的大小。

Question 5

您可以在此处查看布局引擎如何确定列表图像的大小：http : //www.w3.org/wiki/CSS/Properties/list-style-image

有三种方法可以解决此问题，同时保持CSS的优势：

调整图像大小。
使用背景图像和填充代替（最简单的方法）。
使用不带定义大小的SVG，用作SVG时viewBox将大小调整为1em list-style-image（对Jeremy表示感谢）。

Question 6

几乎就像作弊一样，我只是进入图像编辑器，然后将图像调整了一半大小。对我来说就像是一种魅力。

Question 7

多亏了克里斯（Chris）的出发点，这里的一项改进可以解决所用图像的尺寸调整问题，使用“第一胎”只是为了表明您可以使用列表中的各种图标来完全控制自己。

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

这似乎在所有现代浏览器中都很好，您需要确保宽度和负边距具有相同的值，希望对您有所帮助

Question 8

我使用Bootstrap和做了一种终端仿真器，Javascript因为我需要一些动态功能来轻松添加新项目，然后将提示从Javascript。

HTML：

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

Javascript：

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

CSS：

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

希望对您有帮助。

Question 9

我通过将图像标签放在li的前面来实现它：

的HTML

<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">

的CSS

     .listImage{
      float:left;
      margin:2px;
      width:25px
     }
     .li{
      margin-left:29px;
     }

Question 10

这是一个较晚的答案，但我将其放在此处供后代参考

您可以编辑svg并设置其大小。我喜欢使用svg的原因之一是因为您可以在文本编辑器中对其进行编辑。

以下是32 * 32的svg，我在内部对其进行了大小调整，以最初显示为10 * 10的图像。它非常适合替换列表图像

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

然后，我简单地将以下内容添加到我的CSS中

* ul {
    list-style: none;
    list-style-image: url(../images/chevron-right.svg);
}

的list-style: none;，因为它防止在加载备用图像显示默认列表图像是重要的。

Question 11

这是使用Inline SVG播放列表项目符号的示例（2020浏览器）

list-style-image: url("data:image/svg+xml,
                      <svg width='50' height='50'
                           xmlns='http://www.w3.org/2000/svg' 
                           viewBox='0 0 72 72'>
                        <rect width='100%' height='100%' fill='pink'/>
                        <path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
                                 l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
                                 m-54 24v-24h9v24z'/></svg>")

玩SVGwidth和height设置大小
玩 M70 42以定位手
在FireFox或Chromium上有不同的行为！
除掉 rect

li{
  font-size:2em;
  list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}

span{
  display:inline-block;
  vertical-align:top;
  margin-top:-10px;
  margin-left:-5px;
}

<ul>
  <li><span>Apples</span></li>
  <li><span>Bananas</span></li>
  <li>Oranges</li>
</ul>

展开摘要

Question 12

.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 */
}