0

我目前很沮丧。我想通过以下方式设置这个自定义菜单的样式：我想在保持它的自定义下划线的同时将其居中。下划线应始终保持相同的长度，而单词居中并在下划线上方约 4px 处，以便字母不会直接接触下划线。背景图像不应（如果可能）被菜单的白色背景色挡住。我试过使用

display: inline-block; margin: 0 auto;

同时将其他菜单ul和li元素归零，因为在大多数解决方案中建议解决一些类似的问题，但到目前为止没有一个有效。还有类似的东西

margin: 0 20%;
float: left; /*or right, re displays the underline but messes up the text in the below section. It all just goes to the left or right just like display: inline-block */

不能跨屏幕工作。同样重要的是要注意，我没有提供任何关于粘性菜单的信息，但菜单是粘性的，这很烦人。非常感谢。

4

1 回答 1

0

如果您不需要支持非常旧的浏览器，请使用 flexbox！

.menu-navmenu_tr-container {
    display: flex;
}

在这种风格上：

.elementor-widget-wp-widget-nav_menu ul {
    background-color: transparent;
    display: none;
    list-style: none;
    padding: 0 1em;
    margin: 0 auto;
    max-width: 1080px;
    width: 80%;
    float: left;
}

删除宽度和浮动。

对于您已解决的问题，这是执行此操作的样式 - 它位于 custom.css 中：

@media screen and (min-width: 60em)
.anchor-menu-fixed.elementor-widget-wp-widget-nav_menu, .site-header-hidden.elementor-widget-wp-widget-nav_menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 7;
}
于 2017-03-27T16:07:48.277 回答