为什么我的链接添加在“随机”位置

下划线仅使用HTML和CSS，当我使用a标签是用前缀它一个_为什么我的链接添加在“随机”位置

我想我已经使用了content标签的一些地方，但令我惊讶的是，它坚持在JSFIDDLE

<section> 
    <h3>Activity</h3> 
    <a href="#"> 
      <div class="activity"> 
      <div>Some</div> 
      <div>> 198 days?</div> <!-- why does this render as _> 198 days? --> 

      <div>Progressing</div> 
     </div> 
    </a> 
    <br /> 
    <a href="#">> does not have underscore despite having > </a> 
</section>

CSS

.activity { 
    background: #3ea18f; 
    clear: both; 
    margin-bottom: 2%; 
    border-radius: 4px; 
    padding-left: 10%; 
} 
.activity div { 
    width: 33%; 
    display: inline-block; 
}

结果

卸下a标签可以解决问题，但是，我需要的a标签

同样，除去CSS .activity div还删除_但显然我需要的风格

同问题依然存在如果我使用<div>> 198 days?</div>

来源

2015-09-27 Dave

你在使用文字'>'和'<'吗？尝试使用http://www.tutorialspoint.com/html5/html5_entities.htm – user993553

@ user993553，我知道这一点，对不起，我没有说清楚 - 虽然同样的问题仍然存在 – Dave

这是链接文字装饰，但为什么你需要很多html里面的aa？ – user993553

我不知道它是这个行为的意图还是它是一个渲染错误。

在div与_的前面有一个空间，因为你有一个新的生产线，如果你周围添加的所有元素的outline（updated fiddle），你看到_是两个元素之间。

如果添加另一个元素（next fiddle），则会看到另一个元素_。所以下划线出现在该行的所有inline-block元素之间。

该问题与>无关。

要避免此问题而不更改其余的外观，您可以将text-decoration加到none到周围的a。

前面没有> does not have underscore despite having >，因为<a href="#">和> does not之间没有空格。

来源

2015-09-27 08:43:46

<section> 
    <h3>Activity</h3> 
    <a href="#"> 
      <div class="activity"><div>Some</div><div>> 198 days?</div><div>Progressing</div> 
     </div> 
    </a> 
    <br /> 
    <a href="#">> does not have underscore despite having > </a> 
</section>

https://jsfiddle.net/y4zpgkfe/

来源

2015-09-27 08:43:30 user993553

为什么我的链接添加在“随机”位置

回答

相关问题