2016-05-16 17 views
0

У меня есть ссылка со ссылкой на значок слева и стрелка вправо. То, с чем я столкнулся, связано с тем, что текст ссылки связан, это не оправдывает очень хорошо. Как я могу достичь чего-то вроде http://jsfiddle.net/MrLister/3xbfyqkh/, но с моей данной разметкой?оправдывать текст ссылки, следующей за значком изображения, когда он обертывается

<div class="linkitem" id="myTools" style= 
"display:inline-block; padding:4px 0 4px 0; width:90%;"> 
    <a href="{$ItemEditURL}" id="InlineEditLink" style= 
    "cursor: pointer; position:relative; top: 4px; margin-right:5px;"><img height="14" 
    src= 
    "https://maxcdn.icons8.com/Android_L/PNG/24/Programming/edit_property-24.png" 
    title="Edit" width="14"></a> <a href="{$SafeLinkUrl}" style= 
    "color: white !important!" target="_blank" title="{@LinkToolTip}">A 
    very long descriptive Link text goes here</a> 
</div> 
<div class="wrapperArrow" style="float:right; padding-top:5px;"><img alt="" 
src= 
"https://maxcdn.icons8.com/windows10/PNG/16/Arrows/double_right-16.png"></div><br> 

<br><br><br><br><br><br><br> 
<hr> 
Free Icons provided by <a href="https://icons8.com">Icons8</a> 

Моя скрипка здесь ... https://jsfiddle.net/a2gruae6/

+0

В чем разница между образцами, которые вы указали? –

+0

Основное отличие показано в абзаце при изменении размера. Отправной точкой новой строки является значок на первой скрипке и непосредственно под значком на второй скрипке. :) – Frits

ответ

3

Обновить этот код в ваш встроенный стиль, как решить вашу проблему

<div class="linkitem" id="myTools" style= 
    "display:inline-block; padding:4px 0 4px 0; width:90%;"> 
     <a href="{$ItemEditURL}" id="InlineEditLink" style= 
     "cursor: pointer;position: absolute;float:left;width:20px;"><img height="14" 
     src= 
     "https://maxcdn.icons8.com/Android_L/PNG/24/Programming/edit_property-24.png" 
     title="Edit" width="14"></a> <a href="{$SafeLinkUrl}" style= 
     "color: white !important!;float:left;margin-left: 20px;" target="_blank" title="{@LinkToolTip}">A 
     very long descriptive Link text goes here</a> 
    </div> 
    <div class="wrapperArrow" style="float:right; padding-top:5px;"><img alt="" 
    src= 
    "https://maxcdn.icons8.com/windows10/PNG/16/Arrows/double_right-16.png"></div><br> 

    <br><br><br><br><br><br><br> 
    <hr> 
    Free Icons provided by <a href="https://icons8.com">Icons8</a> 
+1

Пожалуйста, найдите время для _explain_, в чем проблема и почему ваше решение работает. Только ответы на код не всегда полезны и могут быть отклонены. – andyb