0
給定以下html(bootply here)。對齊自定義LI svg圖像
<div class="risk">
<ul>
<li><span>Aggressive</span>Lorem ipsum dolor ...</li>
<li><span>Growth</span>doloremque autem...</li>
</ul>
</div>
隨着SCSS如下:
ul {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0 0 0 40px;
span {
&:before {
content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>');
display: inline-block;
width: 30px;
margin-left: -30px;
}
font-weight: bold;
margin-right: 2rem;
}
}
}
我怎麼了SVG與LI文本中間排隊。
我已經嘗試了大量的填充和邊距選項,但圖像始終比文本要高。