求助：如何使ul下的li元素宽度铺满整个屏幕

Hey there! Let’s tackle this problem of getting your <ul>'s <li> items to span the full screen width— I’ve dealt with this exact frustration before, so let’s break it down step by step.

First, let’s look at the common culprits that might be stopping your <li>s from stretching:

• Browsers add default padding to <ul> elements, which can push your content inward
• If your <li>s aren’t set to take up available space, they’ll only be as wide as their content
• Parent container constraints might be limiting the width without you noticing

Here’s how to fix it, building on the code you provided:

Step 1: Reset Default List Styles #

First, wipe out those browser default margins and padding on the <ul> so it doesn’t add extra space:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; /* Remove bullet points too, since this is a nav */
}

Step 2: Use Flexbox to Stretch <li>s #

Flexbox is perfect for this— it lets you evenly distribute space across your list items. Add this to your nav’s <ul>:

nav ul {
  display: flex;
  width: 100%; /* Make sure the ul takes full width of the nav */
}

nav ul li {
  flex: 1; /* This tells each li to take an equal share of available space */
  text-align: center; /* Optional: Center your nav text for better aesthetics */
}

Step 3: Adjust Your Dropdown Button #

Since you have a .dropdown-btn, make sure it fits properly inside the <li>:

.dropdown-btn {
  width: 100%;
  height: 50px;
  background: white;
  line-height: 50px;
  display: none;
  border: none; /* Remove default button border if needed */
  cursor: pointer;
}

Full Working Example #

Putting it all together, here’s a complete code snippet you can test:

<nav>
  <ul>
    <li>
      <button class="dropdown-btn">Home</button>
    </li>
    <li>
      <button class="dropdown-btn">About</button>
    </li>
    <li>
      <button class="dropdown-btn">Services</button>
    </li>
    <li>
      <button class="dropdown-btn">Contact</button>
    </li>
  </ul>
</nav>

<style>
nav {
  width: 100%;
  height: 50px;
  background-color: #d60d8c;
  margin-bottom: 1px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  width: 100%;
  height: 100%; /* Match nav's height so li's fill vertically too */
}

nav ul li {
  flex: 1;
  height: 100%;
}

.dropdown-btn {
  width: 100%;
  height: 100%;
  background: white;
  line-height: 50px;
  display: block; /* Changed to block for testing, switch back to none when needed */
  border: none;
  cursor: pointer;
}

.dropdown-btn:hover {
  background: #f0f0f0; /* Add hover effect for feedback */
}
</style>

A quick note: If you’re still having issues, check if any parent elements outside of <nav> have a fixed width or overflow set— that could be restricting the full-screen stretch.

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