css - CSS 锚文本不在行中

Question

这是我的网站： http: //www.michelepierri.it/

我在 FF 和 IE 中正确地看到了我的主题，但是如果我在 Chrome 菜单中打开它，语音将无法正确显示：

你能帮我解决这个问题吗？

Answer 1

在查看了您的 css 后，我发现太多未使用的样式，请删除这些样式并使用以下规则：

.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}

请在进行更改后查看附件。

看到我也使用相同的版本，对我来说很好

Answer 2

防止菜单选项环绕文本

向您的菜单链接 CSS 添加额外的样式规则，以便所有文本保持在同一行。

.menu a {
    border-left: 1px solid #585858;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    margin: 0;
    padding: 0 0.9em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px #242424;

    white-space: nowrap; /* THIS ONE */
}

并在样式定义中添加相同的内容，.sub-header-menu a因为当我检查站点时，甚至云计算都被包装并破坏了整个情况。

建议：您正在探索 CSS 的可能性是可以的，但是您玩得太多了会产生易读性问题。字母和单词间距只能谨慎操作。我建议删除大部分字母和单词间距设置。