在图像和标尺之间对齐两项

Question

我有一个标志，这是正确地显示，我想让谷歌翻译，下拉显示，就在它下面，然后与它旁边的20个像素的空间，有我的菜单在同一行。然后在这两个项目下面显示一个水平分隔符。主文本应显示在分隔符下面。

然而，我很难让Google翻译显示在徽标下，菜单显示在它旁边，在它们之间有一些空间：

• 水平线显示在这两个项目之上，而不是在它们下面。
• 无法获得谷歌翻译和菜单之间的空间
• Google翻译被覆盖主要文本。

我创建了一个小提琴来展示这个问题。

主要的问题是这两个CSS项目，我相信，但我尝试了许多变化，只是无法使它正确地对齐。

/* PROBLEM IN THE FOLLOWING TWO CSS  */

#google-translate {
  left:10px;
  position:relative;
  top:0px;
  float:left;
  }
#header_right {
  position:relative;
  display:inline;
  padding-left:20px;
  }

非常感谢您的协助。谢谢。

编辑：

预期结果如下：

LOGO
Google Translate + 20px + Menu
Horizontal line
Main Text

谷歌翻译和菜单应该放在水平线上。

Answer 1

这是js小提琴的链接，看看它。

<div id="header_holder">
  <a href="/dev/index.htm" id="logo" title="Logo">Logo</a>

  <div id="header_right">
   <div id="google-translate">
    <div id="google_translate_element"></div>
    <script>
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({
          pageLanguage: 'en'
        }, 'google_translate_element');
      }

    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </div>
  <div id="left20">
      <ul class="dropdown dropdown-horizontal">
      <li><span class="dir">Menu A</span>
        <ul>
          <li><a href="">Sub Menu 1</a></li>
          <li><a href="">Sub Menu 2</a></li>
        </ul>
      </li>
      <li><span class="dir">Menu B</span>
        <ul>
          <li><a href="">Sub Menu 1</a></li>
          <li><a href="">Sub Menu 2</a></li>
        </ul>
      </li>
      <li><a href="">Menu C</a></li>
      <li><a href="">Menu D</a></li>
    </ul>
  </div>
</div>
<div id="rule">

</div>
<div>
  MAIN BODY TEXT 1
  <BR /> MAIN BODY TEXT 2
  <BR /> MAIN BODY TEXT 3
  <BR /> MAIN BODY TEXT 4
  <BR /> MAIN BODY TEXT 5
  <BR /> MAIN BODY TEXT 6
  <BR />
</div>
  </div>

https://jsfiddle.net/eacnn958/

检查上面的链接

只在css中进行此更改。

  #rule {
      border-top: 1px solid #000000;
      margin-top:25px;
    }
ul.dropdown {
  font-weight: normal;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  padding-left:20px;
}

下面是我只在css中更改的https://jsfiddle.net/cfhu1hvy/检查

Answer 2

设法通过以下方式使其发挥作用：

• 删除该职位:相对；在#google-翻译
• 将显示改为“内联块”，而不是#header_right上的“内联”。
• 在规则中添加“边距-顶部:15 to；”