jquery width（）不使用文本

Question

我有两个带有文字的容器，我正在尝试获取它们的宽度并将它们加在一起。我已经设置了一个jsfiddle，但它似乎根本不工作，我不知道为什么。我已经使用了width（）和innerWidth（）。

这是小提琴： http://jsfiddle.net/a83C6/

这是代码：

HTML：

<div class="text-1">hello</div>
<div class="text-2">hello</div>

<div class="length"></div>

CSS：

.length {
  border:1px solid red;
  height:5px;
}

JS：

$(document).ready(function() { 
  $(".length").css({
    width:$(".text-1").innerWidth() + $(".text-2").innerWidth() 
  });
});

Answer 1

div是一个块级元素，所以它占据了容器的整个宽度，所以将它们加在一起当然会使它们的全宽增加一倍，如果你想把你的div拿走仅内容的实际宽度，您可以将其更改为inline-block或float，并根据该宽度计算宽度。

<强> Fiddle

您也可以在不使用JS的情况下执行此操作，也可以添加容器

<div class="container">
    <div class="text-1 text">hello</div>
    <div class="text-2 text">hello</div>
    <div class="length"></div>
</div>

和

.container, .text {
    display:inline-block;
}

<强> Fiddle