无法在标题的同一行中获取徽标和导航栏答案

【问题标题】：Can't get logo and nav bar in same line in the header无法在标题的同一行中获取徽标和导航栏
【发布时间】：2015-07-01 08:03:00
【问题描述】：

我确信这个问题可能有一个简单的解决方案，但我似乎无法弄清楚。我正在学习前端 Web 开发，并且正在将这个网站作为一个项目来构建。我一直在尝试的任何方法似乎都不起作用。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>FatHead | Blog</title>
        <link href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
                <div class="nav">
                  <ul>
                     <li><a href="index.html">Home</a></li>
                     <li><a href="#">About</a></li>
                     <li><a href="#">Contact</a></li>
                     <li><a href="#">Categories</a></li>
                  </ul>
                </div>
            </div>
        </div>
   </body>    
</html>

CSS：

/***********************************
          LOGO
***********************************/

.header{
background-color: skyblue;
margin:0;
padding:0;
width: 100%;

}

.logo{
text-align: left;
display: block;
margin:0 15px 15px 15px;

}

#logo-large{
display: inline;
font-size: 3em;
font-weight: 200%;
font-family: 'Dosis' , sans-serif;
}

#logo-small{
display: inline;
font-weight:0;
font-size: 3em;
font-family: 'Dosis' ,sans-serif;
}


/************************************
           NAVIGATION
************************************/

.nav ul{
list-style-type:none;
display: block;
padding: 5px;
margin: 5px;
text-align: center;


}

.nav ul li{
display: inline;
padding: 5px 15px;

}

.nav ul li a{
text-decoration: none;
padding: 5px;
color:black;
font-family: 'Muli', sans-serif;
font-size: 1.25em;

}

.nav ul li a:active, .nav ul li a:hover{
background-color: deepskyblue;
color: white;
}









body{
margin:0;
padding:0;
}

【问题讨论】：

标签将始终在新行上。试试这个试试
FATHEAD
不需要css

标签： html css header navigation nav

【解决方案1】：

首先，我认为您的标记对于这种情况略有不正确，因为您已将 nav 包装在徽标 div 中。另外，我建议您对标记采用 HTML 5 标准：

HTML：

<header>

    <h1 id="logo-large">FAT</h1>
    <h1 id="logo-small">HEAD</h1>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Categories</a></li>
        </ul>
    </nav>

<header>

导航 CSS：

nav{
display:inline;
float:right;
}

nav ul{
    list-style:none;
}


nav ul li{
    display:inline-block;
}

例如参见小提琴演示：Demo

【讨论】：

【解决方案2】：

你可以这样做：

@import url("http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic");
/***********************************
LOGO
***********************************/

.header{
  background-color: skyblue;
  margin:0;
  padding:0;
  width: 100%;
}

.logo{
  text-align: left;
  display: block;
  margin:0 15px 15px 15px;
  overflow: hidden;
}

#logo-large{
  font-size: 3em;
  font-weight: 200%;
  font-family: 'Dosis' , sans-serif;
  float: left;
}

#logo-small{
  font-weight:0;
  font-size: 3em;
  font-family: 'Dosis' ,sans-serif;
  float: left;
}


/************************************
NAVIGATION
************************************/

.nav ul{
  list-style-type:none;
  display: block;
  padding: 5px;
  margin: 5px;
  text-align: center;
  float: right;
}

.nav ul li{
  display: inline;
  padding: 5px 15px;

}

.nav ul li a{
  text-decoration: none;
  padding: 5px;
  color:black;
  font-family: 'Muli', sans-serif;
  font-size: 1.25em;

}

.nav ul li a:active, .nav ul li a:hover{
  background-color: deepskyblue;
  color: white;
}

body{
  margin:0;
  padding:0;
}

<div class="header">
  <div class="logo">
    <div class="nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Categories</a></li>
      </ul>
    </div>
    <h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
  </div>
</div>

【讨论】：

【解决方案3】：

只需将以下代码添加到您的 CSS 中。

CSS

.logo > .nav{
    display:inline-block;
}

DEMO

【讨论】：

标签将始终在新行上。试试这个试试

FATHEAD

DEMO