Question

我搜索并搜索并发现了类似的问题，但以前的线程都没有帮助我解决我的问题。在我的桌面主页上，我将导航菜单浮动到右侧。但是，当在移动设备上调整大小或查看时，我希望菜单项居中而不是向右浮动，因为它看起来很乱。我已尝试过其他帖子的各种建议，但似乎没有任何工作，这让我疯了。我已经尝试过媒体查询来将对齐方式更改为一定大小并且不成功，所以我一定做错了。此外，它没有那么重要，但我注意到标题徽标在移动版本中得到了如此轻微的修剪，所以如果有人也可以帮助我，那将会很棒。提前感谢您的帮助！

请参阅随附的屏幕截图。 Desktop Version Mobile Version

编辑：抱歉，我忘记发布代码了。这适用于大学课程，所以现在CSS和HTML合并为一个文档，但稍后会有一个单独的样式表。此外，可以在geocities.ws/dinetown上看到实时版本

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

<style>

#container {
 min-height: 100%;
 position: relative;
}

#header {
 padding: 1em;
 color: white;
 background: black; 
 text-align: left;
}

#content {
 padding-bottom: 50px;
}

footer {
 height: 50px;
 line-height: 50px;
 left:0px;
 bottom:0px;
 position: absolute;
 width: 100%;
 display: inline-block;
 color: white;
 background: black:
 font-family: Majesti;
 background: black; 
 text-align: center;
 vertical-align: center;
}

.header img {
  float: left;
  background: black;
  width:100%;
  overflow: hidden;
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 100%;
 background-color: rgb(190, 30, 45);
 font-family: Athelas;
}

li {
 float: right;
}

li a {
 float: right;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li a:hover {
 background-color: maroon;
}

html,
body {
 margin: 0;
 padding: 0;
 height: 100%;
 font-family: Athelas; 
 color: white;
 background: rgb(65, 57, 61);
}

p {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 15px;
 padding-bottom: 15px;
}

</style>

  <title>Welcome to Town</title>

</head>


<body style="margin: 0;">
<div id="container">

 <div id="header">
  <img src="images/logo.svg" width="400px">
 </div>

  <div id="content">
   <ul>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="about.html">ABOUT US</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="social.html">SOCIAL HOUR</a></li>
    <li><a href="menu.html">MENU</a></li>
    <li><a class="active" href="index.html">HOME</a></li>
   </ul>


   <section style="margin: 0;">
    <img src="images/dining_room.png" width="100%" overflow="hidden">
   </section>

   <article>
    <p align="center">
     Our mission is to bring <b><i>quality</i></b>, <b><i>style</i></b> and the wish for 
     <b><i>good fortune</i></b> to all of our guests. We provide a high-end dining 
     experience through Chinese cuisine.
    </p>
   </article>
 </div>

<footer>
&copy; 2017 Andrew Struppa
</footer>


</div>
</body>
</html>

Answer 1

添加self.addEventListener('fetch', event => { if (event.request.method !== 'GET') { return; } if (event.request.mode === 'navigate') { event.respondWith(caches.match('index.html')); return; } // The rest of your fetch handler logic goes here. });媒体查询，并将导航菜单的min-width放在那里。如果您希望导航的位置居中，请为其设置float:right，width和display:block;在margin:auto媒体查询中，您可以使min-width抵消设置的宽度。

修改现在，我发现您已使用代码更新了帖子，您可以从li中删除浮点数，添加width:auto并将媒体查询设置为ul到文本 - 中间和右侧。如果没有浮动，您必须重新订购菜单。

＆＃13;

display:inline-block

＆＃13;

调整大小时，将导航从右浮动更改为居中

1 个答案: