我刚好碰到过一模一样的情况！谷歌翻译默认的嵌入样式确实挺粗糙的，但其实它提供了隐藏的布局参数来实现你想要的地址栏式展示，不用找复杂的教程，几步就能搞定：

• 第一步：找到你当前的谷歌翻译嵌入代码
  你之前通过网站管理器生成的代码大概是这样的（核心是googleTranslateElementInit函数里的初始化逻辑）：

  <div id="google_translate_element"></div>
  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'zh'}, 'google_translate_element');
  }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  

• 第二步：添加布局参数启用地址栏样式
  在初始化TranslateElement的时候，加上layout参数，指定为google.translate.TranslateElement.InlineLayout.SIMPLE——这就是触发地址栏式展示的关键：

  <div id="google_translate_element"></div>
  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'zh',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE // 启用地址栏布局
    }, 'google_translate_element');
  }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  

  这个布局会生成一个横向的条形栏，和你想要的地址栏样式完全匹配。

• 第三步：自定义样式优化视觉效果
  如果默认的地址栏样式还是不符合你的网站风格，可以用CSS覆盖默认样式，比如固定在页面顶部、调整背景色和控件样式：

  /* 固定翻译栏在页面顶部 */
  #google_translate_element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 9999;
  }
  /* 美化语言选择下拉框 */
  .goog-te-combo {
    padding: 6px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
  }
  

另外补充一下，谷歌翻译还有其他布局选项，比如PopupLayout（默认的弹窗样式）、InlineLayout.HORIZONTAL（更紧凑的横向布局），你可以根据需求替换参数试试。

内容的提问来源于stack exchange，提问作者StaXter