嘿,除了导航栏外,我页面的其余部分都适合移动设备。有人可以纠正我的错误吗?在Web平台上,导航效果不错,但在移动平台上,它与页面的其余部分不符。我在下面包括了CSS和HTML代码。 我不知道如何使它适合移动设备,它只是伸出来使移动页面更大。
<header>
<div class="navigation-bar">
<div id="navigation-container">
<img src="logo.png" alt="Trulli" width="400" height="80">
<ul>
<li><a href="https://www.mhric.org/about/about-mhric">About</a></li>
<li><a href="https://www.mhric.org/services">Services</a></li>
<li><a href="https://www.mhric.org/training">Training</a></li>
<li><a href="https://www.mhric.org/directory">Departments</a></li>
<li><a href="https://www.mhric.org/resources">Recources</a></li>
<li><a href="https://www.mhric.org/career-opportunities">Career Opportunities</a></li>
<li><a href="https://www.mhric.org/our-partners">Partners</a></li>
<li><a href="https://www.mhric.org/links/links">Vendor Links</a></li>
</ul>
</div>
</div>
</header>
#navigation-container {
width: 1600px;
margin: 0 auto;
height: 100px;
}
.navigation-bar {
background-color: #ffffff;
height: 70px;
width: 100%;
text-align:center;
}
.navigation-bar img{
float:left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}