HTML 对齐项目和字体颜色

Question

<!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 具有红色，但它将它与其他数字分开放置在左侧。我该如何解决这个问题？

Answer 1

首先，我建议不要将 font 元素与内联 CSS 一起使用，因为 font element 现在已过时，而是使用 span 与 class 红色，然后您可以使用 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>

希望对您有所帮助！

Answer 2

只需将整个语句包装在另一个标记中，如下所示：

    <p>One<br>Two<br>Three<br><span style="color:red">Four</span></p>

顺便说一句 - 我不鼓励样式属性支持适当的 css 文件，但只是为了演示...

发生这种情况是因为当您在样式中使用 flex 时，容器的每个流入子元素都变成了 flex item，并且直接包含在 flex 容器中的每个连续运行文本是包裹在一个匿名的弹性项目中。

HTML 对齐项目和字体颜色

HTML align items and font color

html

css

flexbox

display