<!DOCTYPE html>
<html>
<head>
<style>
div.div1 {
align-items: center;
border-style: solid;
border: 1px solid red;
display: flex;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
One<br>Two<br>Three<br><font color="red">Four</font>
</div>
</body>
</html>
我使用上面的代码来显示图像和旁边的文本One, Two, Three, Four。我试图让Four有一个红色，但它将它与其他数字分开放在左边。我该如何解决这个问题？
答案 0 :(得分：3)
首先，我建议不要使用带有内联CSS的font元素，因为font element现在已经过时，而是使用带有红色类的span，然后您可以使用CSS。
其次将div中的所有文字包装起来会使它们保持一致。
示例：
div.div1 {
align-items: center;
border-style: solid;
border: 1px solid red;
display: flex;
}
.red {
color: red;
}<div class="div1">
<img src="https://www.w3schools.com/tags/smiley.gif">
<div>
One
<br>
Two
<br>
Three
<br>
<span class="red">Four</span>
</div>
</div>
希望这有帮助！
答案 1 :(得分：1)
将整个语句包装在另一个标签中，如下所示：
therefore for a list x (1, 2, 3, 4)
*x is 1, 2, 3, 4 as unpacked values
顺便说一句 - 我将风格属性转换为适当的css文件，但仅仅是为了示范...
这是因为在样式中使用flex时容器中的每个in-flow子项都变为flex item，并且直接包含在Flex容器内的每个连续文本行都包含在匿名的flex项中。