除非在本地样式和外部样式表中，否则 css text-align 不起作用？这是怎么回事？

问题描述

我有一个 css 类 .menu-bar。

<style>
    .menu-bar { width: 100%; text-align: center; }
</style>

如果我将类放在外部样式表中，它将不会加载（在 html 文件中无效）。如果我将类放在本地样式表中（在 head 标签中），则只有在外部样式表中也定义了该类时，它才有效。我知道这一点，因为我从外部样式表中删除了该类，而本地类什么也没做。我的观察是，这是由文本对齐引起的。这是怎么回事？

我的实现代码：

<div class="menu-bar">
    <div> Content </div>
</div>

我的目的是将我的 css 代码放在外部样式表中。在这种情况下，我不得不复制这段代码，这似乎贬低了拥有外部样式表的意义。任何想法都会有所帮助。

解决方法

我个人使用 VS 代码，据我所知，您的问题是您无法链接外部样式表（CSS 文件）如果您使用 vs 代码，则可以使用它。

如果代码不起作用，可能是实时服务器中的某些问题或任何其他问题。

如果我错了，请纠正我！

我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
       <div class="menu-bar">
           <div>
               <p>Content *Text align - center Text horizontally*. </p>
           </div>
       </div>
   </div> 
</body>
</html>

CSS 代码（外部表格）

.menu-bar{
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: aqua;
}

Click me to view result

外部 CSS 代码没有运行，因为您没有在 HTML 中导入它。
将此添加到 HTML 的开头：

<link rel="stylesheet" href="PATH_TO_CSS.css">

text-align