asp.net - 带有锚文本的图像？

Question

我是listview并显示数据。所以想到在前面显示图标

所以我确实尝试使用下面的部分。

.listview a
{
    font-weight: normal;
    background:transparent url(../images/arrow.png) scroll  no-repeat left center;
    padding:2px 0px 2px 20px;
}

它工作正常，但如果文本进入下一行，那么第二行最左边对齐，这看起来很奇怪。（在stackoverflow中，您可以看到右侧的示例“类似问题”:-)）。如果它继续第一行，则下一行与第一行对齐。

知道如何为此处理文本。

我的列表视图布局如下

<ItemTemplate>
      <tr>
          <td>
              <a href="">
                    <%#Eval("Description")%></a>
           </td>
       </tr>
 </ItemTemplate>

我应该使用<ul></ul>而不是<a></a>吗？

Answer 1

a默认情况下，标签是内联标签，这意味着顶部和底部填充不起作用。要解决此问题，您应该添加display:block;到标签并围绕填充和/或背景位置进行播放；正确设置。

Answer 2

您可以为此使用两个divs并设置float那个。它会起作用的。

<ItemTemplate>
  <tr>
      <td>
          <a href="">
             <div class="imagBack"></div>
              <div class="noBackImage">
                 <%#Eval("Description")%></a>
              </div>
       </td>
   </tr>
</ItemTemplate>

创建样式表如下

.listview a
{
    display:block
}
.listview a div.imagBack
{
    width:50px;
    float:left;
    font-weight: normal;
    background:transparent url(../images/arrow.png) scroll  no-repeat left center;
    padding:2px 0px 2px 20px;
 }
 .listview a div
 {
    width:100px;
    float:right;
    font-weight: normal;
 }