Question

我确信这个问题可能有一个简单的解决方案，但我似乎无法解决这个问题。我正在学习前端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;
}

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

NAV CSS：

nav{
display:inline;
float:right;
}

nav ul{
    list-style:none;
}


nav ul li{
    display:inline-block;
}

请参阅小提琴演示，例如：Demo

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

Answer 3

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

<强> CSS

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

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

3 个答案:

DEMO