在图像和标尺之间对齐两个项目答案

【问题标题】：Align two items between image and ruler在图像和标尺之间对齐两个项目
【发布时间】：2017-01-12 09:23:44
【问题描述】：

我有一个可以正常显示的徽标，我希望在其下方显示 Google 翻译下拉菜单，然后在其旁边以 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

谷歌翻译和菜单应该位于水平线的顶部。

【问题讨论】：

如果可能的话，您能否使用绘图或图表工具添加预期输出的图像？？
@Gowtham 我已经编辑了上面的问题。谢谢。
我已经添加了答案检查出来

标签： javascript html css alignment

【解决方案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 中进行了更改

【讨论】：

格式看起来不错。但我不能将正文包裹在标题 div 中。显然我简化了 html，但主体文本还有很多。我需要自己隔离 header_holder 部分。有没有什么可以在不接触 HTML 的情况下做到这一点？
我想我添加了这个答案，查看最后 3 行 css 代码
通过添加 margin-top 我能够得到下面的行。 ID left20怎么样？有什么方法可以在它们之间放置一个空格而不为 left20 插入 DIV？即不更改 HTML。
在 ul.dropdown 添加我提到的代码，查看
如果我只对 CSS 进行更改，它在 Safari 上不起作用 :( 而且它不会在任何仅更改 CSS 的浏览器上正常折叠。

【解决方案2】：

通过以下方式使其工作：

删除位置：相对；在#google-translate 上
在#header_right 上将显示更改为“inline-block”而不是“inline”
添加“margin-top:15px;”到#rule

【讨论】：