html - 在标题中的一行中显示 div

Question

哟!所以我最近一直对整个 WordPress 感到好奇，我打算通过更改颜色等来使用我为另一家公司制作的网站。在菜单和 Logo 所在的标题中，我想要他们可以点击的社交图标，但是当我尝试添加其中一个图标时，出于某种奇怪的原因，菜单跳到了标题下。

.Header {
  background-color: white;
  width: 100%;
  height: 60px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  opacity: 0.9;
  position: relative;
  display: inline;
}
.menubutton {
  font-family: 'source_sans_prolight';
  background-color: #EBEBEB;
  color: black;
  width: 100px;
  height: 60px;
  border: none;
  font-size: 18px;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.menu {
  float: right;
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  background-color: #EBEBEB;
  width: 100px;
}
.dropdown a {
  font-family: 'source_sans_prolight';
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  min-height: 20px;
  padding: 10px;
}
.dropdown a:hover {
  background-color: #CBCBCB;
  color: white;
}
.menu:hover .dropdown {
  display: block;
}
.menu:hover .menubutton {
  background-color: #303030;
  color: white;
  opacity: 1;
}
.Logo {
  float: left;
  padding-left: 10px;
  padding-top: 4px;
}
.socialbutton1 {}

<div class="Header">

  <div class="Logo">

    <a href="index.html">
      <img src="css/images/logo.png" alt="Logo">
    </a>

  </div>

  <div class="social">

    <div class="socialbutton1">
      <img src="css/images/facebook1.svg" alt="Facebook">
    </div>


  </div>

  <div class="menu">

    <button class="menubutton">
      MENU
    </button>

    <div class="dropdown">

      <a href="#social" class="smoothScroll">
    Our Products
    </a>

      <a href="#kontakt" class="smoothScroll">
    Contact Us
    </a>

    </div>
  </div>
</div>

感谢帮助:)

Answer 1

我认为你应该给 socialbutton 添加 float。

.socialbutton1 {
  float:left;
}