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>

Answer 2

尝试将display:inline-block添加到email。

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

<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>

BTW，display-block: inline;无效的CSS属性。

Answer 3

使用“display：inline-block”代替“display-block：inline”

Answer 4

如果您想要内联元素，请不要使用div。此外，display-block属性在css中也不存在。尝试使用<p>元素将整个文本包装在页脚内，并<span>更改颜色，如下所示：

   <div id="footer"> 
     <p>Black Text  <span style="color: blue;"> Blue Text </span>  Black Text</p>
   </div>

没有换行的两个div

4 个答案: