CSS3圆形菜单横向并排布局问题求助

Hey there! Looks like you're almost there with your circular menus—nice work getting the colors, fonts, and text positioning sorted out. Let's tackle that horizontal layout issue so those menus stop stacking vertically and line up side by side.

The Root of the Problem #

Right now, your .ca-menu li elements are block-level by default, meaning they take up the full width of their container and stack on top of each other. Plus, your .ca-menu container is only set to width: 500px, which is way too narrow to fit multiple 230px-wide menu items (especially with the 10px border adding to their total width).

Solution: Use Flexbox for Easy Horizontal Layout #

Flexbox is the simplest, most reliable way to achieve consistent horizontal alignment. Here's how to adjust your CSS:

.ca-menu{ 
  padding: 0; 
  margin: 20px auto; 
  width: 1250px; /* Updated for 5 menus: each menu is 230px + 20px border = 250px total; 250*5=1250px */
  display: flex; /* Turns the container into a flex container */
  justify-content: space-between; /* Adds even space between menus; use 'center' for grouped alignment */
  flex-wrap: nowrap; /* Prevents menus from wrapping to a new line */
  list-style: none; /* Removes default list bullets */
} 

.ca-menu li{ 
  width: 230px; 
  height: 230px; 
  border: 10px solid #f6f6f6; 
  overflow: hidden;
  border-radius: 50%; /* Ensures the menu stays circular (added just in case you missed it!) */
  flex-shrink: 0; /* Stops menus from getting squashed if the container is resized */
}

Key Changes Explained: #

• display: flex on .ca-menu: This turns all child li elements into flex items, which automatically line up horizontally.
• Adjusted container width: Each menu item has a total width of 230px (content) + 10px*2 (border) = 250px. For 4 menus, set the container to 1000px instead.
• justify-content: Controls spacing between menus. space-between pushes them to the container edges with equal gaps, while center keeps them grouped in the middle.
• flex-shrink: 0: Guarantees your menus stay their full size instead of shrinking to fit a too-narrow container.

Alternative: Inline-Block (For Older Browser Support) #

If you need to support older browsers, use inline-block instead:

.ca-menu{ 
  padding: 0; 
  margin: 20px auto; 
  width: 1250px; 
  font-size: 0; /* Removes annoying whitespace between inline-block elements */
  list-style: none;
} 

.ca-menu li{ 
  width: 230px; 
  height: 230px; 
  border: 10px solid #f6f6f6; 
  overflow: hidden;
  border-radius: 50%;
  display: inline-block; /* Makes elements line up horizontally */
  margin-right: 20px; /* Adds space between menus */
  font-size: 16px; /* Reset font size since we set it to 0 on the container */
}

.ca-menu li:last-child{
  margin-right: 0; /* Remove extra margin from the last menu */
}

Either approach should get your menus lined up perfectly. Start with the flexbox method—it's more modern and way easier to maintain long-term!

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