时间戳

首页 > 解决方案 > 如何将不同的样式添加到 HTML 中一行的不同部分并将所有内容一起打印？

italic - 如何将不同的样式添加到 HTML 中一行的不同部分并将所有内容一起打印？

问题描述

我想将不同的样式添加到 HTML 中一行的不同部分，然后一起打印该行。想象一下我有下一行：

你好，我的名字是 Bogdan，我住在西班牙。

我设法为该行添加了不同的样式，但我无法将所有部分放在一起，并对每个部分应用不同的样式。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    <style>
    div{
    }.bold{  font-weight: bold;
    }
     .normal{  font-weight: normal;
    }
    .italic{
        font-style: italic;
    }
     .left{
      	text-align:left;
    	float:left;
    }
     .container{
    	letter-spacing:-1px;
    	width: 372px;
    	 font-family: Monaco,monospace;
    	font-size:19px;}
     .center{
      	text-align:center;
    }
     .underline{
      text-decoration: underline;
    }
     .doubleFont{font-size:38px;}
    
    </style>
    </head>
    <body>
		<div class = container>			
			<div class=>
				<div class=>Hello my name is Bogdan</div>
			</div>
			<div class="underline bold">
				<div class=>and i live </div>
			</div>
			<div class="bold">
				<div class=>in Spain</div>
			</div>
			<br>
		</div>
    </body>
</html>

标签： italic

解决方案

用这样的跨度替换 div：

<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>

跨度是内联元素，并在一行上换行。除非另有设置，否则 Div 总是在下一行。还可以考虑在 .container 类上设置更大的宽度。

推荐阅读