jquery ()不处理文本

Question

我有两个容器，里面有文本，我试图得到它们的宽度并将它们相加在一起。我做了个小提琴，但似乎一点用都没有，我也不知道为什么。我使用了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;
}

联署材料：

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

Answer 1

div是一个块级元素，因此它获取容器的全部宽度，因此，将它们相加在一起当然会使两者的宽度加倍，如果您想仅取div的实际内容宽度，您可以将其更改为inline-block或float，并基于此计算宽度。

小提琴

您也可以在不使用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;
}

小提琴