Question

我正在构建一个以英语或西班牙语动态显示的网站。当用西班牙语时，单词会更长，导致导航栏重叠到第二行。

http://bit.ly/ZZ5Waq

我需要更改哪些代码？

谢谢！ -Cullen

编辑：我不想让字体变小。重要的是它保持相同的英文大小。

但是我愿意在西班牙语版本中缩小/缩小填充。

如果页面的网址中包含/ es /，有没有人知道如何添加CSS样式？最好用PHP。

Answer 1

你可以做很多事情来制作导航栏1行。

1）制作较小的font-size或不同字体间距的字体样式。

2）同样，您可以尝试将每个菜单列表中的padding缩小，以使其适合。

3）虽然你可能不想这样做，但你甚至可以使网站的西班牙语版本具有不同的布局宽度（使容器的宽度更大）。

有很多不同的方法，您只需更改代码并查看其外观。也可能是你最终使用2行，或者你可能只是找到缩短菜单列表的方法。

如果不发布任何代码，就很难为您提供进一步的帮助。

Answer 2

您可以修复菜单项的宽度，然后将文本换行到每个链接中的额外行。因此导航栏仍然是一行，但按钮变得更深。

两个可能的缺点及其解决方案：

问题：根据你的CSS，真正长的单词会突破固定的宽度，或者被强制换成中间单词。

解决方案：接受中间词中断，或让翻译人员使用不同的短词。只要你不习惯在两种语言中使用完全相同的措辞，就可以用几乎任何语言来做到这一点。

问题：单行导航链接不会自动调整为双线按钮的深度，因此如果您的链接有边框或以其他方式显示其各自的高度，则导航可能看起来不均匀。 / p>

解决方案：多个。

将所有链接设置为可容纳两条线的固定高度，并且垂直居中的类型（你可以使用“display：table-cell;” 要做到这一点）或让它保持顶对齐。
使用jQuery来衡量最高的链接（或者高度）包含div）并使所有链接都具有相同的高度。

在构建多语言网站时，我通常会尝试通过设计避免这个问题 - 在导航栏中留下足够的空白空间来增加文字，并让翻译人员使用较短的单词。

编辑：

要在PHP中获取URL，请使用$ _SERVER ['REQUEST_URI']

<?php $url = $_SERVER['REQUEST_URI'];
if(strpos($url,'/es/')) { ?>
    <style type="text/css">
        .menu a { letter-spacing: 0; }
    </style>
<?php } ?>

翻译时导航栏延伸到第二行

2 个答案: