我怎样才能在同一条线上获得两个div？

I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:

我正在为一个网站制作一个菜单并遇到问题:我有一个应该在左侧的徽标和菜单按钮,它应该在右侧。这是我到目前为止所得到的:

<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>

<style type="text/css">

body {
  margin: 0;
  padding: 0;
  font-family: 'Share', cursive;
}

#header {
  background-color: ;
}

#header_logo {
  width: ;
  margin-top: ;
}

#header_menu {
  width: 100%;
}

.menubutton {
  height: 2.5em;
  line-height: 2.5em;
  display: inline-block;
  background-color: ;
  margin-left: 20px;
}

a {
  font-family: 'Share', cursive;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

</style>
</head>

<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->


<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
    <img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
    <a href="">Home</a>
</div>
<div class="menubutton">
    <a href="">Info</a>
</div>
<div class="menubutton">
    <a href="">Werben</a>
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
    <a href="">Kontakt & Impressum</a>
</div>
</div>
</div> <!-- End of header -->

</div> <!-- End of wrapper -->
</body>
</html>

The problem is that the logo is not on a line with the menu buttons… Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?

问题是徽标与菜单按钮不在一条线上......在我添加徽标之前,一切都很完美。我尝试了不同的东西但没有任何效果你们知道如何解决这个问题吗?

2 个解决方案

#1

Add float:left to your #header_logo div.

将float:left添加到#header_logo div。

jsFiddle example

Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.

请注意,如果希望间距更加紧密,您可能还希望减少或消除.menubutton类的line-height属性。

#2

You may also try for display: inline-block;

您也可以尝试显示:inline-block;

This property allows a DOM element to have all the attributes of a block element, but keeping it inline.

此属性允许DOM元素具有块元素的所有属性,但保持其内联。

Also do check this article

另外请查看这篇文章

#1