javascript - 对齐图像和标尺之间的两个元素

Question

我有一个正确显示的 Logo ，我想让谷歌翻译下拉菜单显示在它的正下方，然后在它旁边有 20 像素的空间让我的菜单在同一行上。然后在这两个元素下方显示一个水平分隔线。正文应显示在分隔线下方。

但是，我无法让 Google 翻译显示在 Logo 下方，菜单显示在其旁边且它们之间有一些空间:

• 水平线显示在这两个元素的上方而不是下方 他们。
• 无法获取 Google 翻译和菜单之间的空格
• 谷歌翻译覆盖了正文

我创建了一个 fiddle显示问题。

我认为主要问题出在这两个 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 fiddle的链接，看一下

<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;
}

这里是 https://jsfiddle.net/cfhu1hvy/检查我只在 css 中进行了更改