避免在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
}

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

Answer 1

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

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

Answer 2

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

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