移动端响应式导航菜单内边距设置导致右侧溢出问题求助

Hey there! Let's figure out how to fix that right-side overflow issue you're seeing with your mobile navigation menu when adding left padding to nested ul ul a links.

What's Causing the Overflow? #

The problem likely stems from the default CSS box-sizing: content-box behavior. When you add padding to an element with this setting, the padding gets added outside the element's defined width, making the total width of the link larger than its parent container. That's why you're seeing content spill over to the right.

Step-by-Step Solutions #

1. Switch to border-box for Consistent Sizing
   Add this CSS to ensure padding is included within the element's width, not added on top of it:

   .mobile-menu ul,
   .mobile-menu ul li,
   .mobile-menu ul a {
     box-sizing: border-box;
     width: 100%;
   }
   

   This ensures that your padding-left values don't push the link's total width beyond the bounds of its parent container.

2. Prevent Horizontal Overflow at the Container Level
   Add an overflow rule to your main mobile menu container to catch any accidental spillover:

   .mobile-menu {
     overflow-x: hidden;
     width: 100%;
   }
   

   This will hide any content that tries to escape the menu's bounds without adding horizontal scrollbars.

3. Keep Your Existing Padding Rules (Now Safe!)
   Your original padding styles will work without causing overflow thanks to border-box:

   .mobile-menu ul a {
     padding-left: 40px;
   }
   
   .mobile-menu ul ul a {
     padding-left: 60px;
   }
   

Full Modified CSS Example #

Putting it all together, your CSS should look something like this:

.mobile-menu {
  overflow-x: hidden;
  width: 100%;
}

.mobile-menu ul,
.mobile-menu ul li,
.mobile-menu ul a {
  box-sizing: border-box;
  width: 100%;
}

.mobile-menu ul a {
  padding-left: 40px;
}

.mobile-menu ul ul a {
  padding-left: 60px;
}

Quick Checks if Issues Persist #

• Make sure no other CSS rules (like float, position: absolute, or fixed widths) are overriding these settings.
• Verify that your parent ul elements don't have extra left/right padding or margins that could add to the total width.

This should get your nested menu links indented properly without causing that annoying right-side overflow!

内容的提问来源于stack exchange，提问作者user9637601