我试图让我的顶部菜单始终完全占据屏幕的整个宽度。可悲的是,虽然它在桌面上运行良好,但在移动设备上却不断超出预期宽度。
给出一些背景信息:我正在尝试构建“Rookie”主题 ( https://wordpress.org/themes/rookie/ ) 的子主题。 我此时的目标是用顶部栏替换主题的默认菜单,在顶部栏上我想要左侧的汉堡菜单,中间的 Logo 和右侧的搜索按钮。
这已经完成,但出于我不明白的原因,在移动设备上进行测试时,顶部栏超出了预期的 100% 宽度。这可以在尝试使用 Chome 开发工具的“Phone 6/7/8”时观察到。我也尝试使用物理设备并得到相同的结果。 页面是https://gornik2.kosimus.eu/
我花了几个小时试图弄清楚,此时我基本上已经没有想法了。我将宽度定义为 100%、100vw 等等,尝试了 max-width,检查了父元素并确保宽度没有在任何地方增加。
很确定我缺少一些非常愚蠢和小的东西。将不胜感激。
谢谢!
PS 该页面上还有许多其他问题(颜色等。 - 请忽略那些)。
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
最佳答案
添加到 LEAGUE TABLE 的 th
标记的伪元素 (:after) 导致了此问题。如果位置值从“绝对”更改为“相对”,则可以解决此问题。
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
关于css - 元素超出其定义的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55890117/