<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 사용의 요점은 해상도에 따라 크기를 조정하는 것이기 때문에 이미지 크기를 변경하고 싶지 않습니다. background-image
해킹 없이 CSS를 사용하여 이미지 크기를 설정하는 방법이 있습니까?
편집 : 여기에 미리보기가 있습니다 (그림과 드라마를 위해 의도적으로 선택한 큰 이미지) : http://jsfiddle.net/tWQ65/4/
그리고 background-image
CSS3를 사용하는 현재 해결 방법 background-size
: http://jsfiddle.net/kP375/1/
답변
‘list-style-image’속성을 설정하는 대신 img 태그를 사용해 볼 수 있습니다. CSS를 사용하여 너비와 높이를 설정하면 실제로 이미지가 잘립니다. 그러나 img 태그를 사용하면 이미지의 너비와 높이 값이 조정됩니다.
답변
나는 사용합니다 :
li{
list-style: none;
}
li::before{
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}
답변
나는 사용하고있다 :
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는 배경 이미지 크기를 설정합니다.
답변
여기에서 레이아웃 엔진이 목록 이미지 크기를 결정하는 방법을 확인할 수 있습니다. http://www.w3.org/wiki/CSS/Properties/list-style-image
CSS의 이점을 유지하면서이 문제를 해결할 수있는 세 가지 방법이 있습니다.
- 이미지 크기를 조정하십시오.
- 대신 배경 이미지와 패딩을 사용하십시오 (가장 쉬운 방법).
- 정의 된 크기가없는 SVG를
viewBox
사용하면list-style-image
(Kudos to Jeremy) 로 사용될 때 1em으로 크기가 조정됩니다 .
답변
부정 행위와 거의 비슷하게 이미지 편집기에 들어가서 이미지 크기를 절반으로 조정했습니다. 나를위한 매력처럼 작동합니다.
답변
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;
}
이것은 모든 최신 브라우저에서 잘 작동하는 것 같습니다. 너비와 음수 여백이 동일한 값을 갖는지 확인해야합니다. 도움이되기를 바랍니다.
답변
나는 일종의 터미널 에뮬레이터를 사용 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;
}
도움이 되었기를 바랍니다.