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

【问题标题】：Change navigation from floating right to centered when resized调整大小时将导航从浮动右侧更改为居中
【发布时间】：2017-07-26 02:24:28
【问题描述】：

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

请查看随附的屏幕截图。 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>

【问题讨论】：

请分享html+css或创建小提琴

标签： html css responsive-design

【解决方案1】：

添加一个min-width 媒体查询并将导航菜单的float:right 放在那里。如果你想让导航的位置居中，给它一个集合width、display:block和margin:auto；在min-width 媒体查询中，您可以使用width:auto 来抵消设置的宽度。

编辑：现在我看到你已经用代码更新了你的帖子，你可以从 li 中删除浮动，添加 display:inline-block 并将媒体查询放在 ul 上以进行文本对齐中心和右边。如果没有浮动，您将不得不重新订购菜单。

<!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;
 text-align:center;
}

li {
 display:inline-block;
}

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;
}
@media screen and (min-width: 768px) {
ul{
text-align:right;
}
</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>

【讨论】：