我试图使我的顶部菜单始终保持屏幕完全宽度。遗憾的是, 尽管它在台式机上可以正常工作, 但在移动设备上时, 它一直在扩展超出预期的宽度。
提供一些背景信息:我正在尝试构建”
菜鸟”
主题的子主题(https://wordpress.org/themes/rookie/)。我现在的目标是将主题的默认菜单替换为顶部栏, 在该栏上我希望左侧的汉堡菜单, 中间的徽标和右侧的搜索按钮。
这已经完成了, 但是由于我不明白的原因, 在移动设备上进行测试时, 顶部栏超出了预期的100%宽度。尝试使用Chome开发工具的”
Phone 6/7/8″
时, 可以观察到这一点。我也尝试过使用物理设备, 但结果相同。该页面为https://gornik2.kosimus.eu/
来自开发工具的图片
我花了几个小时试图弄清楚这一点, 而此时我基本上没有想法了。我将宽度定义为100%, 100vw, 依此类推, 尝试了最大宽度, 检查了父元素, 并确保宽度没有在任何地方增加。
可以肯定的是, 我确实缺少一些愚蠢的小东西。想法将不胜感激。
谢谢!
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;
}
#1添加到LEAGUE TABLE的th标签中的伪元素(:after)导致了此问题。如果位置值从” 绝对” 更改为” 相对” , 则可以解决此问题。
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute;
*/
position: relative;
}
【元素超出其定义的宽度】屏幕截图
推荐阅读
- 嵌入式WordPress表单插件短代码未显示在页面中
- 在Gutenberg图像,封面和画廊中编辑srcset和size属性-块
- 编辑页面保存按钮未在wordpress中显示
- 编辑主题自定义菜单
- Java线上故障排查不会怎么办,p8大佬总结的套路清单带你轻松玩转!
- MongoDB GUI可视化客户端管理工具推荐
- 整理全网可视化大屏有关资料,学习大屏设计,大屏原型参考,大屏设计参考
- Java面试官(如何正确使用 Spring 注入集合类型())
- ECIC演讲精华|如何构建云原生应用下的高性能持久化存储()