在HTML中如何将div元素显示在同一行？

Question

我希望在我的jsp页面上展示一段文本：

Sample date: <div id="sampleDate"/>

我希望它显示为示例日期：2012年8月29日

但是它却显示为：

示例日期：

2012年8月29日

有人能帮我解决这个问题吗？

- DarkKnightFan

---

可能是重复的问题：如何使div元素显示为内联？ - lc.

@lc，这并不完全是一个重复的问题，因为旧问题涉及到 div 元素包含文本块的情况（这一点从问题本身并不明显，但可以从讨论和答案接受中看出）。 - Jukka K. Korpela

了解为什么这个新行也太重要啦 https://developer.mozilla.org/zh-CN/docs/Web/HTML/%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0 - Tamil

你的标记很可能不是<div id="sampleDate"/>，因为在HTML中它只是一个开始标记，在作为XHTML提供时它是一个空元素。 - Jukka K. Korpela

Answer 1

请将其写成 -

Sample date: <span id="sampleDate"></span>

我不建议这么做，但如果你想保留DIV，你需要将其变成行内元素 -

Sample date: <div id="sampleDate"></div>

#sampleDate{ display: inline; }

- Dipak

Answer 2

样例日期的CSS应该是：

#sampleDate { 
   display:inline;
}

您可以使用float:left;来设置“示例日期”，并使用float:right;来设置#sampleDate块。将这两个块放入另一个块中，并设置宽度（这样这两个块之间就不会有很大的空隙）。

- user1317647

---

这句话的意思是在这种简单的情况下，使用浮点数没有任何意义。 - Jukka K. Korpela

Answer 3

你可以使用CSS #sampleDate{display:inline;}。但是你应该使用@Dipaks的方法，通过使用span标签。

在这里查看实时效果 http://jsfiddle.net/WkNp8/1/

- andrewk