如何将翻译选择与我的链接置于同一级别?

问题描述 投票:0回答:1

在我的网站上,我添加了一个小功能,可以让您更改网站的语言。但问题在于我定位链接和翻译选择的方式。我怎样才能把所有东西放在同一条线上?

  <nav id="navbar" class="navbar">
    <ul>
      <li><a href="{{route('home')}}" class="nav-link {{ request()->is('home') ? 'active' : '' }}">Acceuil</a></li>
      <li><a href="{{route('a-propos')}}" class="nav-link {{ request()->is('a-propos') ? 'active' : '' }}">A propos</a></li>
      <li><a href="{{route('nos-services')}}" class="nav-link {{ request()->is('nos-services') ? 'active' : '' }}">Services</a></li>
      <li><a href="#">Produits</a></li>
      <li><a href="{{route('blog')}}"  class="nav-link {{ request()->is('blog') ? 'active' : '' }}">Actualites</a></li>
      <li><a href="{{route('contact')}}" class="nav-link {{ request()->is('contact') ? 'active' : '' }}">Contact</a></li>
    </ul>
    <div id="google_translate_element"></div>
  </nav><!-- .navbar -->
html css laravel-blade
1个回答
0
投票

我在理解您的问题时遇到了很大的问题,但根据您提供的代码资源我已经理解了。您的问题在于定位翻译元素。如果是这样,那么这就是您需要的 CSS 样式。下次您遇到任何问题或疑问时请提供更多详细信息。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>StackOverflow</title>
  </head>

  <style>
    .navbar {
      display: inline-flex;
      margin: 10px auto;
      text-align: center;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }

    ul {
      padding: 10px;
      margin: 5px auto;
      display: inline-flex;
      flex-wrap: wrap;
    }
    li {
      display: inline;
      padding: 5px;
      margin: 10px auto;
    }
    #google_translate_element {
      text-align: center;
    }
  </style>

  <body>
    <nav id="navbar" class="navbar">
      <ul>
        <li>
          <a
            href="{{route('home')}}"
            class="nav-link {{ request()->is('home') ? 'active' : '' }}"
            >Acceuil</a
          >
        </li>
        <li>
          <a
            href="{{route('a-propos')}}"
            class="nav-link {{ request()->is('a-propos') ? 'active' : '' }}"
            >A propos</a
          >
        </li>
        <li>
          <a
            href="{{route('nos-services')}}"
            class="nav-link {{ request()->is('nos-services') ? 'active' : '' }}"
            >Services</a
          >
        </li>
        <li><a href="#">Produits</a></li>
        <li>
          <a
            href="{{route('blog')}}"
            class="nav-link {{ request()->is('blog') ? 'active' : '' }}"
            >Actualites</a
          >
        </li>
        <li>
          <a
            href="{{route('contact')}}"
            class="nav-link {{ request()->is('contact') ? 'active' : '' }}"
            >Contact</a
          >
        </li>
      </ul>
      <div id="google_translate_element">Translate Text</div>
    </nav>
    <!-- .navbar -->
  </body>
</html>

希望这有帮助! ;) .

© www.soinside.com 2019 - 2024. All rights reserved.