在我的网站上,我添加了一个小功能,可以让您更改网站的语言。但问题在于我定位链接和翻译选择的方式。我怎样才能把所有东西放在同一条线上?
<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 -->
我在理解您的问题时遇到了很大的问题,但根据您提供的代码资源我已经理解了。您的问题在于定位翻译元素。如果是这样,那么这就是您需要的 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>
希望这有帮助! ;) .