我一直在努力学习CSS约2个月,我偶然发现无法将这两个div放在同一条线上。我的徽标位于标题栏上,但我的登录按钮不会继续显示?
此外,如果你的家伙可以告诉我缩短我的css代码的方法来做同样的事情,那也很棒!
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
*{
margin: 0px;
padding: 0px;
}
.headerMenu {
background-color: #00B9ED;
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
#logo {
margin-left: 15%;
}
#logo a {
padding-top: 3px;
height: 38px;
font-size: 35px;
font-family: 'Oswald', sans-serif;
text-decoration: none;
color: #FFFFFF;
}
#nav {
width: 100px;
height: 40px;
background-color: #00B9ED;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #e5e5e5;
padding: 5px;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
margin-left: 60%;
}
#nav p {
margin-top: 8%;
}
#nav a {
color: white;
}
#nav a:link {text-decoration:none}
#nav a:visited { text-decoration:none}
#nav a:hover {text-decoration:none; opacity: 0.6;}

<!DOCTYPE html>
<html>
<head>
<title>Daily Quotes</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="logo">
<h2><a href="#">Daily Quotes</a></h2>
</div>
<div id="nav">
<p><a href="#">login</a></p>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
尝试将float:left;在你的#logo
上#logo {
margin-left: 15%;
float:left;
}
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
*{
margin: 0px;
padding: 0px;
}
.headerMenu {
background-color: #00B9ED;
height: 60px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
#logo {
margin-left: 15%;
float:left;
}
#logo a {
padding-top: 3px;
height: 38px;
font-size: 35px;
font-family: 'Oswald', sans-serif;
text-decoration: none;
color: #FFFFFF;
}
#nav {
width: 100px;
height: 40px;
background-color: #00B9ED;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #e5e5e5;
padding: 5px;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
margin-left: 60%;
}
#nav p {
margin-top: 8%;
}
#nav a {
color: white;
}
#nav a:link {text-decoration:none}
#nav a:visited { text-decoration:none}
#nav a:hover {text-decoration:none; opacity: 0.6;}
&#13;
<!DOCTYPE html>
<html>
<head>
<title>Daily Quotes</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="logo">
<h2><a href="#">Daily Quotes</a></h2>
</div>
<div id="nav">
<p><a href="#">login</a></p>
</div>
</div>
</body>
</html>
&#13;