html - 两个没有换行的div

Question

我试图在一行中显示文本，其中一小部分文本采用不同的样式。这是我的代码-

<style>

#footer {
    color: black;
    text-align: center;
    padding: 5px;
    font-size: 16px; 
    font-family:Calibri;
    display-block:inline;


}
</style>
<div id="footer">Questions? Contact us 
    <div id="email" style="color:blue; text-algin:center;display-block:inline;">abc@xyz.com</div> 
    Thank you
</div>

期望的输出是

 Questions ? Contact us abc@xyz.com Thank you

但输出如下所示。

<style>
  #footer {
    color: black;
    text-align: center;
    padding: 5px;
    font-size: 16px;
    font-family: Calibri;
    display-block: inline;
  }
</style>
<div id="footer">Questions? Contact us
  <div id="email" style="color:blue; text-algin:center;display-block:inline;">abc@xyz.com</div>
  Thank you
</div>

如何在一行中获取文本的一部分，而该行的一部分采用不同的样式

Answer 1

将内部div改为span

<style>
  #footer {
    color: black;
    text-align: center;
    padding: 5px;
    font-size: 16px;
    font-family: Calibri;
    display-block: inline;
  }
</style>
<div id="footer">Questions? Contact us
  <span id="email" style="color:blue; text-algin:center;">abc@xyz.com</span>
  Thank you
</div>