html - 如何将段落放在一行中的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>

如果我使用 jQuery 文本在 paragraf 中放置一些较长的文本，则使用 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