Question

在表格单元格中，我试图显示图像，并且右侧垂直居中，对着图像两行文本。以下是居中，但第一行的锚标记包装到下一行的开头。我在Chrome和IExplorer都注意到了这一点。

如何清理显示屏，使其不显示第二行的前导符号？

<td>
  <div>
    <a href="some_other_page.html" title="Something Else">
      <img class="tblimg" src="my_picture.png" style="display:inline-block; vertical-align:middle"/>
    </a>
    <span style="display:inline-block; vertical-align:middle">
      <a href="javascript:do_stuff(''); calc_stuff()">This thing</a>
      <br>This has a leading line from the above anchor
    </span>
  </div>
</td>

Answer 1

尝试box-decoration-break:none;和text-decoration:none;以及border:none;

Answer 2

默认情况下，前导破折号实际上是链接上显示的下划线。要删除它，只需将样式text-decoration: none;应用于<a>标记。

以下是删除默认链接样式时的结果：

#image-link { 
    text-decoration: none;
}

<td>
  <div>
    <a href="some_other_page.html" title="Something Else" id="image-link">
      <img class="tblimg" src="my_picture.png" style="display:inline-block; vertical-align:middle"/>
    </a>
    <span style="display:inline-block; vertical-align:middle">
      <a href="javascript:do_stuff(''); calc_stuff()">This thing</a>
        <br/>This has a leading line from the above anchor
    </span>
  </div>
</td>

编辑：如果您只想删除图片的下划线，请提供包含图片ID或唯一类的<a>标记（在我的示例中，我给它的ID为{ {1}}）并为该ID /类声明image-link。

Answer 3

为包含图像的锚添加内联：块样式，如下所示：

<a href="some_other_page.html" title="Something Else" style="display:inline-block">

如何摆脱这个HTML代码中的前导破折号？

3 个答案: