偏离<a> tag , is off by few pixels

Question

I wanted to create a simple dotted underline animation for a menu bar of mine , so i wrote the following HTML:

<nav role="navigation" class="navigation">

  <ul class="nav-listed-links">
    <li class="active"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Our Potfolio</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Contact US</a></li>
    <li class="underline"></li>
  </ul>

</nav>

And the following JS code to make the underline move.

JS:

$('.nav-listed-links > li > a').hover(function() {

  var offset = ($(this).offset().left - 0),
    width = $(this).outerWidth();

  $('.underline').addClass('on');

  $('.underline').css({
    left: offset,
    width: width
  });

}, function() {

  $('.underline').removeClass('on');


});

The smooth animation is CSS transitions, FIDDLE HERE 。

好吧现在让我们对问题进行归零，在JS代码中我试着从文档的左边离<a>走多远，所以我有以下代码：

var offset = ($(this).offset().left - 0)

然而，下划线与<a>标记的开头有点偏差，请参见下面的截图：

为什么会这样。我确信这是愚蠢的，但我真的已经能够解决这个问题。

Answer 1

这只是因为margin，body在小提琴中。设置margin: 0非常有效。您可能对外部元素也有margin。你也必须拿走这些边距。

这是一个更新的JSFiddle，其主体元素为margin-left: 0px;：https://jsfiddle.net/w8unr0od/2/

Answer 2

offset()你

  

检索相对于文档的当前位置

因此，使用margin的默认body，您将获得额外的差距。

我建议使用position()来避免任何问题，因为下划线是相对于ul容器的：

  

检索元素相对于偏移父元素的当前位置

var offset = $(this).position().left,

Updated Fiddle

<子> Reference Position()