Question

如果您获取代码并缩小浏览器窗口，您会注意到列表项与导航栏中的网站标题重叠，这很烦人。有人知道如何解决这个问题吗？

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>

CSS代码：

@font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}

@font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Margin: 0; */
}

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 1500px;
overflow-x: none;
font-size: 0;
}

body {
font-size: 62.5%;
}

.wrapper {
height: 1500px;
}

#navigation_bar {
width: 100%;
height: 90px;
background-color: #1d1d1d;
}

main {
height: 1300px;
}

#container_wrapper {
width: 100%;
height: 865px;
background-image: url("../images/bg.png");
background-repeat: repeat;
}

#footer {
width: 100%;
height: 435px;
background-color: blue;
}

#copyright {
width: 100%;
height: 110px;
background-color: black;
}

.nav_link:link {
margin: 0;
padding: 10px;
text-decoration: none;
text-align: center;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
color: #ffffff;
}

.nav_link:hover {
color: grey;
}

.navbar_list {
float: right;
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
}

.navbar_list li {
float: left;
list-style-type: none;
list-style: none;
padding: 9px 12px;
margin: 0;
font-size: 10px;
display: inline;
}

.logo {
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
color: #AF7817; /* #2C3539 */
margin: 0;
padding: 9px 12px;
float: left;
left: 20%;
position: absolute;
text-transform: uppercase;
letter-spacing: 10px;
top: 25px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
}

谢谢！

Answer 1

如果你想让它们消失

@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-->

Answer 2

Add the following at the bottom of your CSS to drop the menu links lower down on the page and to center your title on the screen for smaller screen sizes. This is how I'd organize the page.

@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;
}

It will look like this on smaller screens:

enter image description here

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

2 个答案: