你好。我试图建立一个寿司餐厅的网站，其响应布局作为练习，以更好地利用HTML和CSS。我遇到了手机问题。我有一个媒体查询，可以更改移动网站的布局。我正在处理标题，我希望将标识放在顶部并在其下方导航，而不是将其全部放在计算机版本的一行上。我已经得到它继续新线，但导航不会成为中心。任何帮助，将不胜感激。谢谢！
这是我的HTML和CSS：
/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: Helvetica, Arial, sans-serif;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
background-color: #CA3B1F;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Navigation */
header {
background-color: #35424a;
min-height: 70px;
}
.logo {
color: white;
font-size: 2.5em;
float: left;
margin-top: 15px;
margin-left: 1em;
}
.highlight {
color: orange;
}
.navlist li a {
text-decoration: none;
color: white;
font-size: 1.5em;
}
.navlist li {
display: inline;
float: right;
margin-top: 25px;
margin-right: 4em;
padding-right: 2em;
}
.current {
color: orange;
}
.herobox {
background: url(../Images/sushi.jpg) no-repeat bottom center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
font-size: 30px;
color: white;
text-align: center;
}
.hboxhead {
padding-top: 2em;
font-size: 2em;
padding-bottom: 1em;
}
.hboxp {
font-size: 24px;
}
/* Style the container with a rounded border, grey background and some padding and margin */
.box {
border: 5px solid grey;
background-color: #35424a;
color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.box::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.box img {
float: left;
margin-right: 20px;
border-radius: 50%;
width: 10%;
}
/* Increase the font-size of a span element */
.box span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
.box {
text-align: center;
}
.box img {
margin: auto;
float: none;
display: block;
}
}
.black {
background-color: #191919;
padding-top: 1em;
}
#whyus {
padding: 1em;
text-align: center;
font-size: 24px;
color: white;
font-weight: 100;
}
.line {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center;
}
.margin {
margin-left: 5em;
margin-right: 5em;
}
.grey {
color: #A9A9A9;
font-size: 1.1em;
}
.price {
display: inline;
position: relative;
bottom: 25px;
margin-left: 2em;
color: white;
}
.left {
margin-right: 60%;
margin-top: 1em;
color: #A9A9A9;
font-size: 18px;
}
.sushipic {
float: right;
margin: 20px;
margin-top: 130px;
}
.menu-icon {
display: hidden;
width: 40px;
height: 40px;
}
/* Media Queries */
@media(max-width: 888px) {
.logo {
text-align: center;
width: 100%;
position: relative;
bottom: 15px;
}
header li {
float: none;
text-align: center;
}
}<header>
<h1 class="logo">Sushi<span class="highlight">Go</span></h1>
<nav class="navbar">
<a href="#" class="menu-icon"></a>
<ul class="navlist">
<li><a href="about.html" class="about">About</a>
</li>
<li><a href="menu.html" class="menu">Menu</a>
</li>
<li><a href="index.html" class="home"><span class="current">Home</span></a>
</li>
</ul>
</nav>
</header>
<section class="herobox">
<h2 class="hboxhead">Providing top-notch sushi in Los Angeles.</h2>
<p class="hboxp"> SushiGo is a sushi restaurant in Los Angeles focused around
<br> providing the customer with a premium experience.</p>
</section>
<div class="box">
<img src="Images/Lauren.png" alt="Picture of Lauren">
<p><span>Lauren Gerstmann.</span>
<br> World Traveler</p>
<br>
<p class="review">SushiGo is the best sushi restaurant I've ever been to! The moment I entered, I was greeted by the staff and immediately
seated. I ordered at a very reasonable price, and the food came within 5 minutes. Everyone was nice, there were no
problems, and the food was the best sushi I've ever had. Definitely going to come back!</p>
</div>
<div class="box">
<img src="Images/daniel.jpg" alt="Picture of Lauren">
<p><span>Daniel Radcliffe.</span>
<br>Reporter for Food Insider</p>
<br>
<p class="review">I'm supposed to list the pros and cons of a restaurant, but that's hard to do when there are no cons! Amazing restaurant!
Thanks so much to SushiGo for doing what they do!</p>
</div>
<div class="box">
<img src="Images/jerry.jpg" alt="Picture of Lauren">
<p><span>Jerry Seinfeld.</span>
<br>Successful food blogger</p>
<br>
<p class="review">I am lost for words. I will literally only eat here from now on. SushiGo, you are the best restaurant I've even been
to.</p>
</div>
<div class="black">
<h2 id="whyus">Why <strong>SushiGo?</strong></h2>
<div class="center">
<img src="Images/lign.PNG" class="line">
<br>
<br>
</div>
<p class="grey center margin">SushiGo has been working for countless years to provide our customers with amazing experiences. Here are a few specific
things we do to make the SushiGo experience better.</p>
<aside>
<img src="Images/Sushi-chef.jpg" width="400" class="sushipic">
</aside>
<img src="Images/money.ico" alt="Cheap" id="cheap" width="60">
<h3 class="grey price">The price</h3>
<p class="left">SushiGo has the lowest prices of any sushi restaurant in Los Angeles.</p>
<br>
<img src="Images/sushiicon.png" width="60">
<h3 class="grey price">The food</h3>
<p class="left">SushiGo has repeatedly been reported by numerous foodies as having the best sushi in the US. We hire only the best chefs,
and have high-quality ingredients.</p>
<br>
<img src="Images/experienceicon.png" width="65">
<h3 class="grey price">The experience</h3>
<p class="left">SushiGo has been in business for over 50 years, and every chef has been making sushi for at least 20 years.</p>
<h2 id="whyus">Our <strong>Allergy Policy</strong></h2>
<div class="center">
<img src="Images/lign.PNG" class="line">
<br>
<br>
</div>
<p class="grey center margin">We want to make our restaurant accesible to everyone. If you have an allergy, please inform your server who will gladly
assist you. All of our food has gluten free, vegetarian/vegan, and peanut free options, and we can adjust the recipes
if necessary to meet your needs.</p>
<br>
<br>
</div>
<footer>
<br>
<p class="center">© 2017 by Sushi Go.</p>
<p class="center grey">Website made by Sam Gerstmann.</p>
</footer>
底部的CSS媒体查询是我遇到问题的地方。它适用于移动网站，它拒绝将导航集中在一起。我确定这是一个愚蠢的错误，我是网络开发的新手。遗憾！
答案 0 :(得分：0)
使用媒体查询时，请确保使用与没有媒体查询相同的选择器，例如使用/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: Helvetica, Arial, sans-serif;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
background-color: #CA3B1F;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Navigation */
header {
background-color: #35424a;
min-height: 70px;
}
.logo {
color: white;
font-size: 2.5em;
float: left;
margin-top: 15px;
margin-left: 1em;
}
.highlight {
color: orange;
}
.navlist li a {
text-decoration: none;
color: white;
font-size: 1.5em;
}
.navlist li {
display: inline;
float: right;
margin-top: 25px;
margin-right: 4em;
padding-right: 2em;
}
.current {
color: orange;
}
.herobox {
background: url(../Images/sushi.jpg) no-repeat bottom center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
font-size: 30px;
color: white;
text-align: center;
}
.hboxhead {
padding-top: 2em;
font-size: 2em;
padding-bottom: 1em;
}
.hboxp {
font-size: 24px;
}
/* Style the container with a rounded border, grey background and some padding and margin */
.box {
border: 5px solid grey;
background-color: #35424a;
color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.box::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.box img {
float: left;
margin-right: 20px;
border-radius: 50%;
width: 10%;
}
/* Increase the font-size of a span element */
.box span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
.box {
text-align: center;
}
.box img {
margin: auto;
float: none;
display: block;
}
}
.black {
background-color: #191919;
padding-top: 1em;
}
#whyus {
padding: 1em;
text-align: center;
font-size: 24px;
color: white;
font-weight: 100;
}
.line {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center;
}
.margin {
margin-left: 5em;
margin-right: 5em;
}
.grey {
color: #A9A9A9;
font-size: 1.1em;
}
.price {
display: inline;
position: relative;
bottom: 25px;
margin-left: 2em;
color: white;
}
.left {
margin-right: 60%;
margin-top: 1em;
color: #A9A9A9;
font-size: 18px;
}
.sushipic {
float: right;
margin: 20px;
margin-top: 130px;
}
.menu-icon {
display: hidden;
width: 40px;
height: 40px;
}
/* Media Queries */
@media(max-width: 888px) {
.logo {
text-align: center;
width: 100%;
position: relative;
bottom: 15px;
margin-left: 0;
}
.navlist li {
float: none;
margin-right: 0;
margin-right: 2em;
margin-left: 2em;
}
.navlist {
text-align: center;
}
}代替<header>
<h1 class="logo">Sushi<span class="highlight">Go</span></h1>
<nav class="navbar">
<a href="#" class="menu-icon"></a>
<ul class="navlist">
<li><a href="about.html" class="about">About</a>
</li>
<li><a href="menu.html" class="menu">Menu</a>
</li>
<li><a href="index.html" class="home"><span class="current">Home</span></a>
</li>
</ul>
</nav>
</header>
<section class="herobox">
<h2 class="hboxhead">Providing top-notch sushi in Los Angeles.</h2>
<p class="hboxp"> SushiGo is a sushi restaurant in Los Angeles focused around
<br> providing the customer with a premium experience.</p>
</section>
<div class="box">
<img src="Images/Lauren.png" alt="Picture of Lauren">
<p><span>Lauren Gerstmann.</span>
<br> World Traveler</p>
<br>
<p class="review">SushiGo is the best sushi restaurant I've ever been to! The moment I entered, I was greeted by the staff and immediately
seated. I ordered at a very reasonable price, and the food came within 5 minutes. Everyone was nice, there were no
problems, and the food was the best sushi I've ever had. Definitely going to come back!</p>
</div>
<div class="box">
<img src="Images/daniel.jpg" alt="Picture of Lauren">
<p><span>Daniel Radcliffe.</span>
<br>Reporter for Food Insider</p>
<br>
<p class="review">I'm supposed to list the pros and cons of a restaurant, but that's hard to do when there are no cons! Amazing restaurant!
Thanks so much to SushiGo for doing what they do!</p>
</div>
<div class="box">
<img src="Images/jerry.jpg" alt="Picture of Lauren">
<p><span>Jerry Seinfeld.</span>
<br>Successful food blogger</p>
<br>
<p class="review">I am lost for words. I will literally only eat here from now on. SushiGo, you are the best restaurant I've even been
to.</p>
</div>
<div class="black">
<h2 id="whyus">Why <strong>SushiGo?</strong></h2>
<div class="center">
<img src="Images/lign.PNG" class="line">
<br>
<br>
</div>
<p class="grey center margin">SushiGo has been working for countless years to provide our customers with amazing experiences. Here are a few specific
things we do to make the SushiGo experience better.</p>
<aside>
<img src="Images/Sushi-chef.jpg" width="400" class="sushipic">
</aside>
<img src="Images/money.ico" alt="Cheap" id="cheap" width="60">
<h3 class="grey price">The price</h3>
<p class="left">SushiGo has the lowest prices of any sushi restaurant in Los Angeles.</p>
<br>
<img src="Images/sushiicon.png" width="60">
<h3 class="grey price">The food</h3>
<p class="left">SushiGo has repeatedly been reported by numerous foodies as having the best sushi in the US. We hire only the best chefs,
and have high-quality ingredients.</p>
<br>
<img src="Images/experienceicon.png" width="65">
<h3 class="grey price">The experience</h3>
<p class="left">SushiGo has been in business for over 50 years, and every chef has been making sushi for at least 20 years.</p>
<h2 id="whyus">Our <strong>Allergy Policy</strong></h2>
<div class="center">
<img src="Images/lign.PNG" class="line">
<br>
<br>
</div>
<p class="grey center margin">We want to make our restaurant accesible to everyone. If you have an allergy, please inform your server who will gladly
assist you. All of our food has gluten free, vegetarian/vegan, and peanut free options, and we can adjust the recipes
if necessary to meet your needs.</p>
<br>
<br>
</div>
<footer>
<br>
<p class="center">© 2017 by Sushi Go.</p>
<p class="center grey">Website made by Sam Gerstmann.</p>
</footer>，因为它不会覆盖，
我也做了一些保证金增强，请查看工作片段：
{{1}}
{{1}}