Question

我有一个正常显示的徽标，我希望谷歌翻译下拉显示在它下面，然后在它旁边，20个像素的空间让我的菜单在同一行。然后在这两个项目下面显示一个水平分隔线。正文应显示在分隔符下方。

但是，我无法将Google翻译显示在徽标和旁边的菜单显示旁边，并且它们之间有一些空格：

水平线显示在这两个项目之上而不是下面他们。
无法获得Google翻译和菜单之间的空格
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小提琴的链接，看看它

<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中进行了更改

Answer 2

通过以下方式管理：

删除位置：relative;在＃google-translate
将显示更改为＆＃34; inline-block＆＃34;而不是＆＃34;内联＆＃34;在#header_right
添加＆＃34; margin-top：15px;＆＃34;到#rule

在图像和标尺

2 个答案: