出于某种原因，当我拥有以这种格式布置标题(“dantdj”)和导航栏的 HTML 时:
<div class="header">
<nav>
<ul class="nav pull-right">
<li role="presentation" class="active" id="index">Home</li>
<li role="presentation" id="projects">Projects</li>
<li role="presentation" id="contact">Contact</li>
</ul>
</nav>
<h3 class="title">dantdj</h3>
</div>
出现以下结果:
这是我总体上想要的样式，但是当使用媒体查询适应较小的屏幕尺寸时，导航栏将位于标题的顶部，而在这种情况下我希望导航栏显示在标题下方。
但是，当我像这样布局 HTML 时，为了解决上述问题:
<div class="header">
<h3 class="title">dantdj</h3>
<nav>
<ul class="nav pull-right">
<li role="presentation" class="active" id="index">Home</li>
<li role="presentation" id="projects">Projects</li>
<li role="presentation" id="contact">Contact</li>
</ul>
</nav>
</div>
最终结果，虽然在移动设备上正确显示，但在桌面上显示如下:
我该如何解决这个问题？我认为它与导航栏上的 float 规则有关，但到目前为止我尝试不同规则的尝试都没有奏效。
完整代码在 JSFiddle 中:JSFiddle
最佳答案
我建议将 h3 移到 nav 之前，让它们按照您想要的方式自然折叠。修改 CSS 使其适用于桌面/移动设备包括:
变化的部分
h3.title {
display:inline-block; margin:10px 0;
}
nav {
display:inline-block; float:right; margin:10px 0;
}
@media only screen and (max-width: 413px) {
h3.title {
display:block;
margin-bottom: 10px;
}
nav {
display:block; float:none;
}
}
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
a {
text-decoration: none;
color: black;
}
.container {
max-width: 730px;
margin: auto;
}
.footer {
padding-right: 15px;
padding-left: 15px;
font-size: 0.75em;
text-align: right;
}
/* NAVIGATION */
footer, nav {
display: block;
}
h3.title {
display:inline-block; vertical-align:middle; margin:10px 0;
}
nav {
display:inline-block; vertical-align:middle; float:right; margin:10px 0;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.pull-right {
float: right !important;
}
ul {
margin-top: 0;
margin-bottom: 10px;
}
.nav > li {
position: relative;
display: inline-block;
padding: 10px;
border-radius: 5px;
}
.active {
background-color: #727272;
color: white;
}
.active > a {
color: white;
}
.title {
font-size: 40px;
font-family: 'Raleway', sans-serif;
}
.bio {
font-size: 20px;
}
.email-btn {
background-color: #e28e8e;
border: none;
padding: 10px;
font-size: 20px;
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.feature-box {
text-align: center;
padding: 10px;
border-radius: 10px;
background-color: #eeeeee;
}
.heading {
font-size: 50px;
font-family: "Raleway", sans-serif;
}
.email-btn:hover {
cursor: pointer;
}
.nav > li:hover {
cursor: pointer;
}
@media only screen and (max-width: 413px) {
.title {
display:block;
margin-bottom: 10px;
}
nav {
display:block; float:none;
}
.heading {
font-size: 33px;
}
.pull-right {
float: none !important;
display: inline-block;,
margin-bottom: 10px;
}
.email-btn {
margin-bottom: 10px;
}
}<!doctype html>
<body>
<div class="container">
<div class="header">
<h3 class="title">dantdj</h3>
<nav>
<ul class="nav pull-right">
<li role="presentation" class="active" id="index">Home</li>
<li role="presentation" id="projects">Projects</li>
<li role="presentation" id="contact">Contact</li>
</ul>
</nav>
</div>
<div class="feature-box">
<div class="main">
<div class="heading">
Lorem ipsum dolor
</div>
<p class="bio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eros massa. Maecenas sit amet ullamcorper ipsum, eu molestie nibh.
</p>
</div>
<div class="projects">
<div class="heading">
See what I've been working on!
</div>
</div>
<div class="contact">
<div class="heading">
Contact me!
</div>
</div>
</div>
</div>
</body>关于html - 元素在不应该嵌套在另一个元素中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44750805/