在图像图标包装时,在文本图标后面对齐文本

时间:2016-05-16 13:50:55

标签: html css css3 xhtml

我的链接左侧是链接图标,右侧是箭头。我遇到的问题是链接文本包装,它不能很好地证明。我怎样才能实现像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/

1 个答案:

答案 0 :(得分: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>