Question

出于某种原因，当我有HTML以这种格式列出标题（“dantdj”）和导航栏时：

        <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>

发生以下结果：

这是我想要的整体风格，但是当使用媒体查询适应较小的屏幕尺寸时，导航栏会位于标题的顶部，而我希望导航栏在这种情况下显示在标题下。 / p>

但是，当我有这样的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

Answer 1

我建议在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;
  }
}

＆＃13;

@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;
    }
}

＆＃13;

<!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>

＆＃13;

Answer 2

这似乎解决了一些（全部？）问题：

<div class="container">
        <div class="header">
            <h3 class="title">dantdj</h3>
            <nav>
                ...

.title { margin: 0 0 10px 0; display: inline-block; } /* added. */

我认为这是我所做的唯一改变。最重要的是display: inline-block;。 Fiddle

如果不应该将元素嵌套在另一个元素中

2 个答案: