Question

我已将div标签添加到同一行的文本中，因为我想添加鼠标悬停功能，但现在所有文本都在不同的行上。如何使所有文本都在同一行？

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>
&nbsp;&nbsp;&nbsp;<div class="about">Accessibility</div>
&nbsp;&nbsp;&nbsp;<div class="about">Contact Us</div>&nbsp;&nbsp;&nbsp;</font></div>

<font face="helvetica" size="2" color="#585858">&copy;2011&nbsp;-&nbsp;Privacy
</font></center>


</center>
</td>
</tr>
</table>
</center>

CSS：

.about:hover {
font: 13px helvetica;
text-decoration: underline;
}

谢谢！

詹姆斯

Answer 1

div 生成一个框，因此生成一个新行，请尝试使用 span 。

此外，您正在使用旧的，经过处理的HTML标记，如字体或属性，如高度/宽度。尝试找一些关于css的好教程，尽可能使用css而不是html。

Answer 2

在float:left中写display:inline-block或div css，因为div是block element，这就是为什么它低于对方的原因。所以;这就是为什么我们使用float & inline-block强制div将其视为实际width：

div{
 float:left;
}

Answer 3

看起来您正在尝试创建一个水平的链接列表（除了您还没有包含<a>元素）。

两种通用技术是：

使用float
使用display: inline-block

您还应该使用列表项元素替换div元素。 Listamatic有很多例子。

您还应该stop using layout tables，并使用CSS替换已弃用的<font>和<center>元素，并使用CSS margins而不是一系列不间断的空格。

Answer 4

是块级元素，因此它们会破坏线并进入下一行你可以尝试 float：left 或 float：right 或者你可以使用显示：内联功能。

看一下这个例子http://jsfiddle.net/T5rBU/。

此外，如果您想在div中包含文本并将它们对齐在一行而不是使用span元素，它们会自动对齐。

添加div标签时如何在同一行上创建文本？

4 个答案: