Html CSS 列表样式图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7775594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS list-style-image size
提问by BitLooter
I'm trying to set custom SVG icons with CSS on a <ul>'s list items. Example:
我正在尝试在 a<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>
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 background-imagehack?
问题是图像太大，并且拉伸了线条的高度。我不想更改图像大小，因为使用 SVG 的目的是根据分辨率进行缩放。有没有办法使用 CSS 设置图像的大小而不需要某种background-image黑客？
EDIT: Here's a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-imageworkaround, using CSS3's background-size: http://jsfiddle.net/kP375/1/
编辑：这是一个预览（特意为插图和戏剧选择的大图像）：http: //jsfiddle.net/tWQ65/4/
我目前的background-image解决方法，使用 CSS3 background-size：http: //jsfiddle.net/kP375/1/
采纳答案by asandeep
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.
您可能想尝试使用 img 标签而不是设置 'list-style-image' 属性。使用 css 设置宽度和高度实际上会裁剪图像。但是如果你使用 img 标签，图像将被重新调整为宽度和高度的值。
回答by Chris
I'd use:
我会用：
li{
list-style: none;
}
li:before{
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}
回答by Franky
I'm using:
我正在使用：
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;
}where background-size set the background image size.
其中 background-size 设置背景图像大小。
回答by CourtDemone
You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/list-style-image
您可以在此处查看布局引擎如何确定列表图像大小：http: //www.w3.org/wiki/CSS/Properties/list-style-image
There are three ways to do get around this while maintaining the benefits of CSS:
在保持 CSS 的优点的同时，有三种方法可以解决这个问题：
- Resize the image.
- Use a background-image and padding instead (easiest method).
- Use an SVG without a defined size using
viewBoxthat will then resize to 1em when used as alist-style-image(Kudos to Jeremy).
- 调整图像大小。
- 改用背景图像和填充（最简单的方法）。
- 使用没有定义大小的 SVG
viewBox，然后在用作list-style-image(Kudos to Jeremy)时将其大小调整为 1em 。
回答by Jahmic
Almost like cheating, I just went into an image editor and resized the image by half. Works like a charm for me.
几乎就像作弊一样，我只是进入图像编辑器并将图像大小调整了一半。对我来说就像一种魅力。
回答by Stedy67
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.
感谢 Chris 在这里的起点是解决所用图像大小调整的改进，使用 first-child 只是为了表明您可以使用列表中的各种图标来让您完全控制。
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;
}
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
这似乎适用于所有现代浏览器，您需要确保宽度和左边距具有相同的值，希望它有所帮助
回答by Leonardo Oliva
I did a kind of terminal emulator with Bootstrapand Javascriptbecause I needed some dynamic to add easily new items, and I put the prompt from Javascript.
我做了一种与终端模拟器Bootstrap和Javascript因为我需要一些动态添加容易新项目，我把从提示Javascript。
HTML:
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:
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:
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;
}
I hope this help you.
我希望这对你有帮助。
回答by Shubham Batham
I achieved it by placing the image tag before the li's:
我通过在 li 之前放置图像标签来实现它：
HTML
HTML
<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">
CSS
CSS
.listImage{
float:left;
margin:2px;
width:25px
}
.li{
margin-left:29px;
}
回答by DeveloperChris
This is a late answer but I am putting it here for posterity
这是一个迟到的答案，但我把它放在这里是为了后代
You can edit the svg and set its size. one of the reasons I like using svg's is because you can edit it in a text editor.
您可以编辑 svg 并设置其大小。我喜欢使用 svg 的原因之一是因为您可以在文本编辑器中对其进行编辑。
The following is a 32*32 svg which I internally resized to initially display as a 10*10 image. it worked perfectly to replace the list image
下面是一个 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>
I then simply added the following to my css
然后我简单地将以下内容添加到我的 css 中
* ul {
list-style: none;
list-style-image: url(../images/chevron-right.svg);
}
The list-style: none;is important as it prevents the default list image from displaying while the alternate image is being loaded.
这list-style: none;很重要，因为它可以防止在加载替代图像时显示默认列表图像。
