Question

我正在尝试将此工作用于联系区域：http://jsfiddle.net/y8zx3/

CSS：

#container #sidebar ul.kontakt { list-style: none }
#container #sidebar ul.kontakt li {
    /* display: block; */
    line-height: 70px;
    margin-right: 50px;
    float: right;
    display: list-item;
}
#container #sidebar ul.kontakt li svg {
    /* position: relative;;*/
    float: left;
}
#container #sidebar ul.kontakt li a {
    /* display: block; */
    line-height: 70px;
    margin: 0;
    float: right;
}

HTML：

<h1>Kontakt</h1>
<p>Schön, das Sie uns kontaktieren wollen. Sie können uns entweder per Kontaktformular erreichen, oder ganz traditionell per Telefon, Email oder Fax.</p>
<ul class="kontakt">
    <li>
        <svg height="50px" id="Layer_1" style="enable-background:new 0 4 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
            <g>
                <polygon points="448,384 448,141.8 316.9,241.6 385,319 383,321 304.1,251.4 256,288 207.9,251.4 129,321 127,319 195,241.6    64,142 64,384  " />
                <polygon points="439.7,128 72,128 256,267.9  " />
            </g>
        </svg><a href="mailto:info@immobilienverwaltung-buerk.de">info@immobilienverwaltung-buerk.de</a>
    </li>
    <li>+49 (0) 7127 980 1493
        <li>+49 (0) 7127 980 1489</li>
        <li>+49 (0) 160 16 25 175</li>
</ul>

我希望电子邮件图标位于列表的左侧，但不希望使用css background-image执行此操作。我怎么能实现这个目标？现在图像在li之上而不是在前面。顺便说一下，该图标是内联SVG。有关完整的合作

，请参阅http://jsfiddle.net/y8zx3/

Answer 1

我使用Chrome的开发者工具（非常有用！）进行了一些CSS编辑。

/* On #container #sidebar ul.kontakt li */
width: 100%;
text-align: right;

/* On #container #sidebar ul.kontakt li svg */
margin: 10px 0 0 10px;

这是你在找什么？ http://jsfiddle.net/bnkAL/

编辑＃1

将SVG的宽度从512px设置为50px ... SVG扩展到<li>之后，将<a>标记向下推。

...viewBox="0 0 512 512" width="50px" x="0px"...

通过SVG将图像添加到列表中

1 个答案: