Html 缩小浏览器窗口时，列表项与导航栏中的标题重叠_Html_Css

Html 缩小浏览器窗口时，列表项与导航栏中的标题重叠

html css

Html 缩小浏览器窗口时，列表项与导航栏中的标题重叠,html,css,Html,Css,如果您使用代码并缩小浏览器窗口，您会注意到列表项与导航栏中的站点标题重叠，这很烦人。有人知道怎么修理这个吗 HTML代码： <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

如果您使用代码并缩小浏览器窗口，您会注意到列表项与导航栏中的站点标题重叠，这很烦人。有人知道怎么修理这个吗

HTML代码：

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Hyperdog Productions</title>
        <link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="wrapper">
                <div id="navigation_bar">
                    <p><a href="index.html" class="logo" id="home">Hyperdog Productions</a></p>
                    <ul class="navbar_list">
                        <li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
                        <li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
                        <li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
                        <li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
                        <li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
                    </ul>   
                </div> <!--End of NAV-->
                <main id="container">
                    <div id="container_wrapper">
                        <img class="container_background" src="images/bg.png" alt="Background" />
                    </div>
                    <div id="footer">
                    </div>
                </main> <!--End of Main-->
                <footer id="copyright">
                </footer>
        </div> <!--End of WRAPPER-->
    </body>
</html>

谢谢

如果你想让它们消失

@media (max-width: 1530px) {
  .navbar_list {
    display: none;
  }
}

类似于bootstrap.css的内容

<div class="container">
<div id="navigation_bar" class="row">
    <div class="col-md-8">
        <p><a href="index.html" class="logo" id="home">Hyperdog Productions</a></p>
    </div>
    <div class="col-md-4">
        <ul class="navbar_list">
            <li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
            <li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
            <li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
            <li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
            <li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
        </ul>   
    </div> <!--End of NAV-->
    <main id="container">
        <div id="container_wrapper">
            <img class="container_background" src="images/bg.png" alt="Background" />
        </div>
        <div id="footer">
        </div>
    </main> <!--End of Main-->
<footer id="copyright">
</footer>
</div> <!--End of WRAPPER-->

在CSS底部添加以下内容，以将菜单链接放在页面下方，并将标题放在屏幕中央，以缩小屏幕尺寸。这就是我组织页面的方式

@media (max-width: 1750px) {
  .navbar_list {
    position: relative;
    display: inline-block;
    float: inherit;
    right: inherit;
    padding-left: 0px;
  }
  .logo {
    position: relative;
    left: inherit;
    float: inherit;
    margin-left: 15px;
  }
}

#navigation_bar {
  text-align: center;
}

在较小的屏幕上，它将如下所示：

为什么不把它们放在小提琴里？当屏幕缩小时，你希望菜单链接在哪里？它们只是消失了。这有点难以解释。但本质上，我希望它们只是被浏览器隐藏，因为它会缩小，如果这在我的屏幕上有任何意义的话，它们会与标题重叠。。。当屏幕缩小时，你愿意让它们位于标题下方吗？这正是发生的事情！我只是觉得它们有点不成样子。如果你把twitter或facebook的窗口缩小到足够小，搜索栏和其他图标就不存在了。如果你知道一个解决方案的话，这就是我所希望的。这种方法很有效，但是你知道有没有其他方法可以让列表项在达到1530px之前显示而不重叠？我唯一不喜欢它使用绝对位置。。。我知道这是可行的，但对我来说似乎只是一个解决办法。。。您应该能够使用div和float lefts，甚至bootstrap col-md-4或类似的东西，而不是position:absolute…所以我不应该对列表项使用绝对定位？另外，我是css新手，以前从未使用过引导。对不起，不要说对不起，有些人使用绝对位置（我会说很多…），我只是觉得没有必要这么做。。。无论如何，你可以为导航栏设置一个最小宽度，比如1530。。。所以它的大小不会小于1530。。。如果你正在开始，引导是很好的。。。。您所要做的就是创建div，并将其放入col-md-4、md-8或md-12类中。如果您将数字相加，请确保始终使用12。。。检查此项，以便更换我的？谢谢！但是，您是否知道在浏览器收缩时，在黑色导航栏中将标题和列表项居中。在我的屏幕上，它看起来很棒，但右边有一个很大的黑色部分。是否有必要将列表项和标题放在整个项目的中心？如果这有意义的话？我只是更新了我的代码。我弄错了你的导航栏。我在id中使用了破折号而不是下划线。它现在可以工作了。我很高兴能帮上忙！最后一件事。如果我把浏览器缩小得很细/很小，链接就会出现在导航栏下面。我能为此做些什么吗？或者它是什么？你可以把

正文{min width:575px；}

放在不允许网站小于575px的地方。这将防止菜单链接以更小的尺寸再次移动。

@media (max-width: 1750px) {
  .navbar_list {
    position: relative;
    display: inline-block;
    float: inherit;
    right: inherit;
    padding-left: 0px;
  }
  .logo {
    position: relative;
    left: inherit;
    float: inherit;
    margin-left: 15px;
  }
}

#navigation_bar {
  text-align: center;
}