Question

我是listview并显示数据。所以想到显示

的图标前面

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

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

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

知道如何为此处理文本。

我的listview布局如下所示

<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;
 }

将图像与锚文本对齐？

2 个答案: