Html 添加div标签时如何将文本全部放在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7740075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text all on the same line when adding div tags?
提问by James
I have added div tags to text on the same line as I wanted to add the mouseover feature but now all the text is on different lines. How do I make it so all the text is on the same line?
我已经在同一行的文本中添加了 div 标签，因为我想添加鼠标悬停功能，但现在所有的文本都在不同的行上。如何使所有文本都在同一行上？
HTML:
HTML：
<div style="margin-top:30px;" />
<center>
<table height="50" width="400" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<hr size="1" color="#585858" width="82%"></hr>
</center>
<center>
<div class="about">
<font face="helvetica" size="2" color="#585858">About Us</div>
<div class="about">Accessibility</div>
<div class="about">Contact Us</div> </font></div>
<font face="helvetica" size="2" color="#585858">©2011 - Privacy
</font></center>
</center>
</td>
</tr>
</table>
</center>
CSS:
CSS：
.about:hover {
font: 13px helvetica;
text-decoration: underline;
}
Thanks!
谢谢！
James
詹姆士
回答by NCode
A divgenerates a box and therefore a new line, try using spaninstead.
一个DIV产生一个盒子，因此新线，请尝试使用范围来代替。
Additionally, you are using old, depreated HTML Tags like font or attributes like height/width. Try to find some good tutorial about css and use css instead of html where possible.
此外，您正在使用旧的、已弃用的 HTML 标签（如字体）或属性（如高度/宽度）。尝试找到一些关于 css 的好教程，并在可能的情况下使用 css 而不是 html。
回答by sandeep
Write float:leftor display:inline-blockin the div cssbecause divis a block elementthat's why it comes below each other. So; that's why we use float & inline-blockto force the divtakes it's actual width:
写float:left或display:inline-block在div css因为div是一个block element，这就是为什么它低于彼此。所以; 这就是为什么我们float & inline-block用来强制div采取它的实际width：
div{
float:left;
}
回答by Quentin
It looks like you are trying to create a horizontal list of links (except you haven't included the <a>elements yet).
看起来您正在尝试创建一个水平链接列表（除非您尚未包含<a>元素）。
The two general techniques are:
两种通用技术是：
- Use
float - Use
display: inline-block
- 用
float - 用
display: inline-block
You should also replace the div elements with list item elements. Listamatichas many examples.
您还应该用列表项元素替换 div 元素。Listamatic有很多例子。
You should also stop using layout tables, and replace the deprecated <font>and <center>elements with CSS, and use CSS marginsinstead of series of non-breaking spaces.
您还应该停止使用布局表，并用 CSS替换已弃用的<font>和<center>元素，并使用 CSSmargins代替一系列不间断空格。
回答by Sahil Grover
are block level elements so they break the line and go into next line u can try with float:leftor float:rightor u can use display:inlinefeature .
是块级元素，因此它们会断行并进入下一行，您可以尝试使用float:left或float:right ，或者您可以使用display:inline功能。
Have a look at this example http://jsfiddle.net/T5rBU/.
看看这个例子http://jsfiddle.net/T5rBU/。
Also if u want to just have text inside div and align them in one line rather use span elements and they get aligned automatically.
此外，如果您只想在 div 中包含文本并将它们对齐在一行中，而不是使用 span 元素，它们会自动对齐。
