Добавить изображение в список с помощью SVG

Я пытаюсь получить эту работу для зоны контакта: http://jsfiddle.net/y8zx3/Добавить изображение в список с помощью SVG

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:[email protected]">[email protected]</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. Как я мог это достичь? прямо сейчас изображение находится над ли, а не спереди. Кстати, иконка - встроенный SVG. См http://jsfiddle.net/y8zx3/ для полного сотрудничества

источник

2013-12-14 geek

Я сделал немного редактирования CSS, используя инструменты разработчика Chrome (в очень полезно!)

/* 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 от 512 пикселей в 50px ... The SVG расширяется мимо <li>, толкая <a> тег вниз.

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

источник

2013-12-14 17:02:49

Работает в jsfiddle, но не в хромированном состоянии. – geek

теперь он работает! СПАСИБО – geek

Добавить изображение в список с помощью SVG

ответ

Смежные вопросы