Question

我在页面中心有一个带有徽标和内容的水平导航。在页面上它有语言翻译，如英语（默认），法语，俄语和德语。当您单击这些链接时，网站上的文字会发生变化。

我唯一的问题是当语言从英语改为俄语或德语时，导航上的文字会因为单词更长而分成另一行（对于内容来说，只需要在一行上导航就可以了！）。这不是很有吸引力，我不能在整个页面上放置文本，因为每边都有一个样式，文本必须保留在边框顶部。

我唯一的解决方案是根据选择的语言更改填充/字体大小？（除非有人知道更好的解决方案）。

我只能想创建某种jQuery函数来检测哪种语言是活动的（因为语言列表在选择时有一个活动类）然后根据语言的变化或者为nav类添加css样式？

希望任何人都可以帮助我找到正确的方向或任何有关相关信息的链接。

我会在这里放置我的html和css标记/演示，但可能没有任何帮助：

html示例：

<div id = "navigation">
   <ul class "nav">
      <li> <a href...... class="active">link</a></li>
   <ul>
</div>

我的语言列表基本上与顶角的菜单相同。

的CSS：

.nav {
    width:80%;
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:auto;
    padding:0;
    text-align:center;
}

.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px 5px;
}

Answer 1

您可以为<body>标记分配一个唯一的语言类别，并使用该类别根据所选语言将特定样式应用于导航。

示例：

<body class="language-english">...

然后是CSS ...

.language-english .nav { font-size: 12px; }

您还可以考虑更长的翻译文本，并使您的导航更具动态性/流畅性，以适应不同的文字长度。

Answer 2

jQuery解决方案：

 $(document).ready(function() {    
        $('#navigation a').on('click', function() { 
          if( $(this).attr('href') == 'russian' || $(this).attr('href') == 'german') {
            $('.nav').css('fontSize', '11px');
          };
        });
    })

根据href属性更改字符串'russian'和'german'。

根据所选语言更改font-size或div类

2 个答案: