并排放置 2 个 Div 和 css 代码压缩答案

【问题标题】：Placing 2 Divs side by side and css code compression并排放置 2 个 Div 和 css 代码压缩
【发布时间】：2015-03-18 03:52:35
【问题描述】：

我已经尝试学习 css 大约 2 个月了，但我偶然发现无法将这 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>

【问题讨论】：

一些提示（因为您问过）： 1. 您不必一直在每个元素上指定相同的字体；只需在父级上指定它。 2. auto 不是padding 的有效属性。 3. 此外，您可能不需要使用那么多供应商前缀，box-shadow 和border-radius 现在得到了极好的支持。 4. 相对定位的块级元素不需要设置width: 100%。
好吧，你说在父节点上指定它？ 2 个 div 的父级是 .headermenu 正确的吗？
没错。我强烈建议阅读有关块级元素的内容：impressivewebs.com/difference-block-inline-css。基本上听起来你希望两个 div 简单地彼此相邻，这不是块级元素的工作方式。你需要浮动它们，绝对定位它们，或者使用display: inline-block
好的，谢谢！我现在将阅读那篇文章。
别担心，希望该链接能解释得更多。还可以对浮点数进行一些研究，这应该可以帮助您了解实际发生的情况：css-tricks.com/all-about-floats

标签： html css button navbar

【解决方案1】：

试着把 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;}

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

【讨论】：