现在检查有没有AI味，有没有外链，有没有符合要求的markdown格式，代码用反引号，标题用#，列表用-，强调用*。对，这样应该可以，语气很像Stack Overflow的回答者，亲切，给出具体代码，解释清楚，符合用户的需求：不用table，实现侧边边框，Flask友好。</think_never_used_51bce0c785ca2f68081bfa7d91973934># Solution: Modern Navbar with Side Borders (No Tables!)

Hey there! Tables for navigation are so outdated—great call steering clear of them. Let's build a clean, semantic navbar using HTML's native elements and CSS Flexbox, which is perfect for this layout. I'll also make sure the code fits nicely with your Flask setup.

Step 1: The HTML (Flask Template Ready) #

We'll use semantic <nav>, <ul>, and <li> tags—this is way better for accessibility and SEO than tables. Drop this into your Flask base template (like base.html) and use url_for() to link to your routes seamlessly:

<!-- In your Flask template (e.g., base.html) -->
<nav class="navbar">
  <ul class="nav-links">
    <li><a href="{{ url_for('home') }}">Home</a></li>
    <li><a href="{{ url_for('about') }}">About</a></li>
    <li><a href="{{ url_for('services') }}">Services</a></li>
    <li><a href="{{ url_for('contact') }}">Contact</a></li>
  </ul>
</nav>

If you're testing without Flask routes yet, just replace the url_for parts with regular URLs like "/home".

Step 2: The CSS (Add Side Borders & Polish) #

Flexbox will handle the horizontal layout, and we'll use border-right to add those vertical dividers between nav items. We'll also remove the border from the last item to avoid an extra line at the end:

/* Reset default list styles first */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Use Flexbox to line up items horizontally */
  display: flex;
  background-color: #f8f9fa; /* Light gray background—tweak to match your design */
}

/* Style each nav item */
.nav-links li {
  /* Add right border to all items except the last */
  border-right: 1px solid #dee2e6; /* Light gray border—adjust color as needed */
}

/* Remove border from the final item */
.nav-links li:last-child {
  border-right: none;
}

/* Style the clickable links */
.nav-links a {
  display: block;
  padding: 1rem 1.5rem; /* Add padding for a larger clickable area */
  text-decoration: none;
  color: #343a40; /* Dark gray text—customize to your brand */
  font-weight: 500;
}

/* Optional hover effect for better interactivity */
.nav-links a:hover {
  background-color: #e9ecef;
  color: #212529;
}

Key Details to Note: #

• Semantic HTML: <nav> signals to browsers that this is navigation content, while <ul>/<li> are standard for link lists—far more appropriate than tables for this use case.
• Flexbox Magic: display: flex on the <ul> automatically arranges all <li> items horizontally, no messy floats or hacks required.
• Side Border Trick: border-right adds the vertical divider between items, and :last-child removes the border from the final link to keep the layout clean.
• Flask Compatibility: Using url_for() ensures your links stay valid even if you change route names later—super useful for maintaining your Flask app.

Quick Customization Tips: #

• Swap out the background-color, border-color, and color values to match your website's palette.
• Adjust the padding numbers to make the navbar taller/shorter or change spacing between links.
• If you prefer left-side borders instead, use border-left and :first-child to remove the first item's border.

内容的提问来源于stack exchange，提问作者עילאי סגל