html - 避免在 CSS 中换行

Question

我的HTML结构如下：

<div id="id1">
   <h1>my name </h1><h3><a href="mailto:myemail_id">myemailid@xyz.com</a></h3>
</div>

代码会自动<h3>在下一行显示。但是，我希望它旁边<h1>没有任何换行。

CSS：

#id1{
    width: 900px;
    padding: 30px; 
    background: #FFF;
    text-align:center;
}

#id1 h3{
    font-family:Arial;
    white-space:nowrap
}

如何修改以达到我想要的结果？

score 3 · Accepted Answer

您可以使用更多语义标记或简单地使用 CSS 修改元素：

#id1 h1, #id1 h3 { display: inline; }

score 2 · Accepted Answer

默认情况下，HTML 标题行为display: block。因此它们不会与任何其他relative元素共享同一行。

将它们的显示设置为inline-block，它们将按照您的预期一个接一个地渲染。

2 回答 2