如何將div內的段落放在一行中？

Question

我想把div中的段落文本放在一行中。如果文本長度超過指定寬度，則不應該進入第二行（div之外）。 我嘗試了所有的CSS，使用text-overflow和white-space但沒有任何成功。 這是我的HTML的一部分：

<li> 
    <a href="#" id="searchLink"> 

     <div id="searchDiv"> 
      <img id="searchImg" src="" /> 
      <p id="searchedProductName"> 
      </p> 
     </div> 
    </a> 
</li> 

如果我把一些較長的文本在paragraf使用jQuery文本使用2線，（去的div外） 我的CSS：

#searchDiv { 
    z-index: 1000; 
    width: 600px; 
    height: 50px; 
    background-color: white; 

} 
    #searchImg { 
    width: 50px; 
    height: 50px; 
} 

#searchedProductName { 
    text-overflow: ellipsis; /* will make [...] at the end */ 
width: 370px; /* change to your preferences */ 
white-space: nowrap; /* paragraph to one line */ 
overflow:hidden; /* older browsers */ 
} 

我解決了顯示行的問題，使用新更新的CSS，但paragragh仍然在div之外。

Answer 1

添加float:left你的形象和display:inline-block到div容器。

#searchDiv { 
    z-index: 1000; 
    width: 600px; 
    height: 50px; 
    display:inline-block; 
} 
#searchImg { 
    width: 50px; 
    height: 50px; 
    float:left; 
} 

JS Fiddle Demo

Answer 2

把

overflow: hidden; 

在SearchDiv