Html 为什么我的字体大小不适用于导航栏？_Html_Css

Html 为什么我的字体大小不适用于导航栏？

html css

Html 为什么我的字体大小不适用于导航栏？,html,css,Html,Css,好的，我试着使用一个live HTML编辑器，它在那里工作，但是当我打开index.HTML文件时它不工作。请告诉我我做错了什么。这是我的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="style.css">

好的，我试着使用一个live HTML编辑器，它在那里工作，但是当我打开index.HTML文件时它不工作。请告诉我我做错了什么。这是我的HTML代码

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="style.css">
        <!-- CSS Stylesheet -->
        <link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
        <!-- Favicon -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap">
        <!-- Permanent Marker Font -->
        <title>Educational Things</title>
    </head>
    <body>
        <!-- Navigation -->
        <div class="container" id="nav-bar">
            <!-- RGH Logo-->
            <div class="container nav-bar-items-left">
                <a href="#" class="nav-bar-items-left">RGH</a>
            </div>
            <!-- Navigation Bar Items -->
            <div class="container nav-bar-items-right">
                <a href="#" class="nav-bar-items-right">Item1</a>
                <a href="#" class="nav-bar-items-right">Item2</a>
                <a href="#" class="nav-bar-items-right">Item3</a>
            </div>
        </div>
        <!-- Ads -->
        <div class="container" id="ads">
            <div class="container">
                <a href="#" class="left-side-ad">
                    <img src="#" class="left-side-ad" alt="left-side-ad">
                </a>
            </div>
            <div class="container">
                <a href="#" class="right-side-ad">
                    <img src="#" class="right-side-ad" alt="right-side-ad">
                </a>
            </div>
        </div>
        <!-- Main Content -->
        <div class="container" id="main-content">
            <!-- Videos -->
            <div class="container" id="videos">
                <div class="container" id="video01">
                    <a href="#" class="video01">
                        <img src="#" alt="video01" class="video01">
                        <br>
                        <p>video01_title</p>
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

正如您所看到的，我的导航栏项目应该被放大，但保持不变。我是不是忽略了什么？还有其他人有这个问题吗？

您的字体大小没有单位（例如

36px

或

36pt

），虽然live editor可能对此没有问题，但大多数浏览器在没有单位的情况下不会更改文本大小

.nav-bar-items-left {
    float: left;
    font-size: 36px; // add unit px (pixels)
    padding: 10px;
}

.nav-bar-items-left {
    float: left;
    font-size: 36px; // add here too.
    padding: 10px;
}

facepalm我觉得事情就这么简单。非常感谢您这么快回复。

.nav-bar-items-left {
    float: left;
    font-size: 36px; // add unit px (pixels)
    padding: 10px;
}

.nav-bar-items-left {
    float: left;
    font-size: 36px; // add here too.
    padding: 10px;
}