CSS列表样式图像大小
我试图用CSS在<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>
问题是，图像太大，并拉伸线的高度。 我不想改变图像的大小，因为使用SVG的要点是按照分辨率进行缩放。 有没有一种方法来设置图像的大小使用CSS没有某种background-image破解？
编辑：这是一个预览（大图像故意select插图和戏剧）： http : //jsfiddle.net/tWQ65/4/
和我目前的background-image解决方法，使用CSS3的background-size ： http : //jsfiddle.net/kP375/1/
你可能想试试img标签，而不是设置“list-style-image”属性。 使用css设置宽度和高度实际上会裁剪图像。 但是，如果您使用img标签，图像将被重新设置为宽度和高度值。
我会使用：
li{ list-style: none; } li:before{ content: ''; display: inline-block; height: y; width: x; background-image: url(); }
您可以看到布局引擎如何确定列表图像大小： http : //www.w3.org/wiki/CSS/Properties/list-style-image
有三种方法可以解决这个问题，同时保持CSS的好处：
- 调整图像大小。
- 使用背景图像和填充代替（最简单的方法）。
- 当使用
viewBox，使用一个没有定义大小的SVG，当用作list-style-image（Kudos to Jeremy）的时候，将调整到1em。
我在用着：
li { margin: 0; padding: 36px 0 36px 84px; list-style: none; background-image: url("../..http://img.dovov.comchecked_red.svg"); background-repeat: no-repeat; background-position: left center; background-size: 40px; }
就像作弊，我刚进入一个图像编辑器，并调整了一半的形象。 对我来说就像一个魅力。
感谢Chris的出发点是一个改进，解决了使用的图像的大小调整，使用第一个孩子只是表示你可以使用列表中的各种图标，让你完全控制。
ul li:first-child:before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('..http://img.dovov.comMoney.png'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; }
这似乎适用于所有现代浏览器，您将需要确保宽度和负余量保持相同的值，希望它可以帮助
我做了一个Bootstrap和Javascript的terminal模拟器，因为我需要一些dynamic的添加新的项目，我把提示从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; }
我希望这可以帮助你。
请试试这个。
.ul li {width:100px;height:100px}
