Question

我在nav标签中放置了元素。当我使用offset（）函数时，我得到了位置的奇怪浮动值，这是不正确的。这有什么不对？

HTML

<div id="navi">
        <a class="logo" >NAVI</a>
        <nav>
            <a>Element A</a>
            <a>Element B</a>
            <a>Element C</a>
        </nav> 

    </div>

   <br><br>
   <input type="text" />

CSS

#navi {
height: 60px;
width: 100%;
  position: relative;
  clear: both;
background: lightgrey;
}

 .logo {
  float: left;
  margin-left: 0;
}

nav {
  position: relative;
  float: right;
}
a{
  margin-left: 30px;
}

JS

$('a').eq(1).offset().left

Answer 1

偏移实际上返回了正确的值，因为您的字体以及nav不能完美排列像素。以下是如何获得“真正的”nav宽度：

$("nav")[0].getBoundingClientRect().width

将元素A的左侧偏移添加到nav的宽度，您会发现添加效果非常好。显而易见的差异是元素A上的30px余量，它不包含在元素A的偏移量中，但包含在nav的宽度中。 http://jsfiddle.net/vo1b3e86/4/

减去30px后，你会想出身体的宽度。

如果要删除小数点右侧的数字，可以根据需要使用其中一个Math函数：

Math.round()将四舍五入到最接近的整数
Math.floor()将向下舍入
Math.ceil()将向下舍入

如果这对您有意义，请告诉我。

Answer 2

在我的情况下，值是错误的，因为需要$（document）.ready和计算的setTimeout来获得正确的值。

jQuery - offset（）。left为浮动元素提供了错误的值

2 个答案: