Html 在单独的行上显示内联内容_Html_Css

Html 在单独的行上显示内联内容

html css

Html 在单独的行上显示内联内容,html,css,Html,Css,我有一个包含内容的简单块： <div> <img src="/img/sample.png" alt="Sample image"> <span class="colored-text">Company name</span> <em>Address</em> </div> 公司名称地址我希望“公司名称”和“地址”在单独的行中现在我有几个选择：制作额外的s，在和标签之间添加一

我有一个包含内容的简单块：

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <em>Address</em>
</div>


公司名称
地址

我希望“公司名称”和“地址”在单独的行中

现在我有几个选择：

制作额外的

s，在

和

标签之间添加一个

标签，或者添加一些其他解决方案。

添加此类功能的正确方法是什么？

您应该做语义上最有意义的事情。通常，

div

标记表示页面中的某种划分。如果您只是列出一个地址，那么这样做是没有意义的。我个人会在行尾使用一个

，它会添加一个换行符，而不会对您的内容做出任何语义声明。

您应该做语义上最有意义的事情。通常，

div

标记表示页面中的某种划分。如果您只是列出一个地址，那么这样做是没有意义的。我个人会在行尾使用一个

，它添加了一个换行符，而不会对您的内容做出任何语义声明。

有很多选择

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <br />
    <em>Address</em>
</div>


公司名称


地址

或


公司名称
地址

或



公司名称
地址

还有更多，包括列表中的变体。

有许多选项

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <br />
    <em>Address</em>
</div>


公司名称


地址

或


公司名称
地址

或



公司名称
地址

还有更多，包括列表中的变体。

下面的CSS将实现此功能：

span.colored-text{ display:block; }

以下CSS将实现此目的：

span.colored-text{ display:block; }

在每行的末尾添加一个分隔符

在每行末尾添加一个中断

您只能使用CSS，并使

em

标记在自己的行中断开：

div em {display:block}

或

无论哪种方式，地址都会断线，您不必触摸您的

HTML

，您只能使用CSS并使

em

标记在自己的行中断线：

div em {display:block}

或

无论哪种方式，地址都会断线，您无需触摸您的

HTML

可能性1（无CSS）：

使用

跳到新行

可能性2（带CSS）：

使用

display:block

CSS使内联元素具有块属性

替代可能性：

用块类型元素包裹每个元素。它可以是

ul/ol

li

组合，也可以是简单的

div

元素。