jQuery的寬度（）與文字不

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