如何将相邻左浮动div的左右border合并为单一边框

I get it—those double-thick borders between your floated items are super annoying. Let's break down why this is happening and fix it with two solid solutions, including a modern approach that avoids messy hacks.

Root Causes #

1. Box-Sizing Misalignment: Without box-sizing: border-box, the 1px border adds to your div's total width (so each .g_item_mobile ends up being 152px wide instead of the intended 150px). This causes unexpected wrapping and makes border overlap more noticeable.
2. Adjacent Border Stacking: When two divs sit side-by-side, their 1px borders combine to look like a 2px line, which is why the middle borders appear thicker than the outer ones.

Solution 1: Fix with Floats, Box-Sizing, and Negative Margin #

This tweaks your existing float layout to eliminate double borders cleanly:

First, add global box-sizing to ensure borders are included in element widths (this fixes the wrapping issue too):

* {
  box-sizing: border-box;
}

Then update your .g_item_mobile class to use negative margin to overlap adjacent borders:

.g_item_mobile {
  height: 150px;
  border: 1px solid #ddd;
  padding: 8px !important;
  background-color: #fff;
  width: 150px;
  float: left;
  margin-right: -1px; /* Pulls the next item left to overlap borders */
}

The negative margin makes each div's right border overlap with the next div's left border, creating a single 1px line between them. Your parent container's padding will keep the outer borders from getting cut off.

Solution 2: Use Flexbox (Cleaner, Modern Approach) #

Floats are great for legacy layouts, but Flexbox solves this problem without hacks and is easier to maintain long-term. Here's how to switch:

First, update the parent container to use Flexbox:

.groceries_right_mobile {
  min-height: 400px;
  height: auto;
  background-color: #fff;
  display: flex; /* Enable flex layout */
  flex-wrap: wrap; /* Allow items to wrap to new rows */
  width: 600px;
  padding: 20px !important;
}

Then adjust the item styles (remove float, and use targeted border removal):

.g_item_mobile {
  height: 150px;
  border: 1px solid #ddd;
  padding: 8px !important;
  background-color: #fff;
  width: 150px;
}

/* Remove right border from all items except every 4th (since each row has 4 items) */
.g_item_mobile:not(:nth-child(4n)) {
  border-right: none;
}

/* Optional: Remove bottom border from items not in the last row */
.g_item_mobile:not(:nth-last-child(-n+4)) {
  border-bottom: none;
}

This approach lets you precisely control which borders are shown, so you never get double lines. It's also easier to adjust if you change the number of items per row later.

Why Your Original Approach Didn't Work #

Manually adding .g_item_mobile_border to specific items isn't scalable (especially if items are added dynamically). It also doesn't account for wrapping rows, leading to inconsistent borders. The solutions above automate this so you don't have to manually tag each item.

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