在ul内部，li的间隔不均匀。

Question

​

​

因此，在桌面媒体查询断点上，.dropdown-content内部的.dropdown-content应该由grid-template-columns: 1fr 1fr 1fr 1fr 1fr;平均间隔，但是最后一个li实际上接近最后一个li，我不知道为什么。

很多人都说它对他们有用，但我不明白它是怎么回事？-> https://teambrainstorm.dev/

我可以使用保证金，但我想知道是否有其他解决方案围绕它使用css-grid。也不是问题的一部分，但是如果有人知道如何使桌面媒体查询断点简单地使用css-grid而不使用断点，请告诉我。

试图使我的网站没有任何断点。

链接中的代码

@media only screen and (min-width: 992px) {
header {
    grid-template-areas: "logo dp gin";
    #switch {
        display: none;
    }
    .dropdown-content {
        display: grid;
        position: relative;
        grid-template-rows: none;
        border: none;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        background-color: #fff;
        li {
            padding: 0;
            a {
                color: #212121;
                &:hover {
                    color: #03A9F4;
                }
            }
        }
     }
   }
 }

完成来自的JsFiddle片段：

​

$("#switch").click(function() {
  $(".fa-bars").toggle();
  $(".fa-times").toggle();
  event.preventDefault();
});

$("#arrow-1").click(function() {
  $(".fa-angle-down").toggle();
  $(".fa-angle-up").toggle();
});

$("#arrow-2").click(function() {
  $(".fa-angle-down").toggle();
  $(".fa-angle-up").toggle();
});

$("#arrow-3").click(function() {
  $(".fa-angle-down").toggle();
  $(".fa-angle-up").toggle();
});

function myFunction(){}

// The debounce function receives our function as a parameter
const debounce = (fn) => {

  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;

  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {

    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) {
      cancelAnimationFrame(frame);
    }

    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {

      // Call our function and pass any params we received
      fn(...params);
    });

  }
};


// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll), {
  passive: true
});

// Update scroll position for first time
storeScroll();

* {
	 margin: 0;
	 padding: 0;
	 text-decoration: none;
	 font-size: 100%;
	 box-sizing: border-box;
	 font-family: "Varela Round", sans-serif;
}
 body {
	 background: #fff;
	 color: #212121;
	 width: 100%;
	 height: 100%;
}
 textarea, select, input, button {
	 outline: none;
}
 ul {
	 list-style-type: none;
}
 h1 {
	 font-size: 3rem;
}
 h2 {
	 font-size: 2rem;
}
 h3 {
	 font-size: 1rem;
}
 p, a, button, li, input {
	 font-size: 0.9rem;
}
 button {
	 cursor: pointer;
	 border: none;
}
 input, button {
	 border-radius: 5px;
}
 input {
	 padding: 0.5rem;
	 border: 2px solid #fff;
	 width: 150px;
	 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
	 color: #212121;
}
 input:hover, input:focus {
	 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.25);
}
 a, button, input {
	 -webkit-transition: all 0.15s ease-out;
	 -moz-transition: all 0.15s ease-out;
	 -o-transition: all 0.15s ease-out;
	 -ms-transition: all 0.15s ease-out;
	 transition: all 0.15s ease-out;
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 a:hover, button:hover, input:hover {
	 -webkit-transition: all 0.15s ease-in;
	 -moz-transition: all 0.15s ease-in;
	 -o-transition: all 0.15s ease-in;
	 -ms-transition: all 0.15s ease-in;
	 transition: all 0.15s ease-in;
}
 a {
	 color: #212121;
}
 a:hover {
	 color: #03a9f4;
}
 input::placeholder {
	 color: #212121;
}
 .site {
	 display: grid;
	 grid-template-rows: 50px 300px 200px 200px 200px 200px 200px 500px;
	 grid-template-areas: "header" "title" "qaz" "qaz" "qaz" "qaz" "qaz" "end";
}
 html:not([data-scroll='0']) header {
	 box-shadow: 0 0 0.25rem rgba(0, 50, 100, 0.5);
}
 header {
	 height: 50px;
	 position: fixed;
	 width: 100%;
	 background: #fff;
	 display: grid;
	 grid-area: header;
	 grid-template-columns: 1fr 1fr 1fr;
	 grid-template-rows: 50px;
	 grid-template-areas: "dp logo gin";
}
 .dropdown {
	 position: relative;
	 grid-area: dp;
}
 .dropdown-content {
	 display: none;
	 grid-area: dc;
	 border-radius: 4px;
	 box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);
	 position: absolute;
	 grid-template-rows: 1fr 1fr 1fr;
	 border: 2px solid #1565c0;
	 background-color: #1565c0;
}
 .dropdown-content li {
	 padding: 12px 10px;
}
 .dropdown-content li a {
	 color: #81d4fa;
}
 .dropdown-content li a:hover {
	 color: #ffccbc;
}
 .gin, #logo, .dropdown {
	 margin: auto;
}
 .set {
	 color: #03a9f4;
}
 #switch {
	 color: #212121;
	 grid-area: switch;
	 display: grid;
	 grid-template-columns: 1fr 1fr 1fr;
	 grid-column-gap: 10px;
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 #switch:focus {
	 outline: none;
}
 .fa-bars, .fa-times {
	 font-size: 1.25rem;
}
 .fa-times {
	 display: none;
}
 #logo {
	 text-align: center;
	 grid-area: logo;
}
/*other*/
 .qaz {
	 grid-area: qaz;
	 background: #42a5f5;
}
 .login {
	 display: none;
}
 .signup {
	 color: #03a9f4;
}
 .title {
	 grid-area: title;
	 text-align: center;
	 background: #42a5f5;
}
 .title h1 {
	 text-transform: uppercase;
	 letter-spacing: 0.5rem;
}
 .end {
	 display: grid;
	 grid-area: end;
	 background: #263238;
	 grid-template-areas: "end-items";
}
 .end-items {
	 display: grid;
	 grid-area: end-items;
	 grid-template-rows: 62.77px 62.77px 62.77px 124.59px 50px;
	 grid-template-areas: "brainstorm" "support" "company" "subscribe" "media";
	 margin: 20px 10px 10px 10px;
}
 .media {
	 grid-area: media;
}
 .media h3 {
	 color: #7986cb;
}
 #folcon a {
	 line-height: 3rem;
	 color: #fff;
}
 .social, .api, .num, .email {
	 margin-left: 10px;
}
 .social {
	 border-radius: 20px;
}
 .api {
	 border-radius: 20px;
	 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.25);
	 transition: all 0.15s cubic-bezier(0.25, 0.25, 0.25, 0.25);
}
 .log, .sign, .gmail, .micro {
	 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.25);
	 transition: all 0.15s cubic-bezier(0.25, 0.25, 0.25, 0.25);
}
 #instagram {
	 color: #e1306c;
}
 .fa-instagram, .fa-twitter, .fa-facebook, .nav-list li a {
	 font-size: 1.2rem;
}
 .fa-stack {
	 font-size: 0.5rem;
}
 i {
	 vertical-align: middle;
}
 .fa-square {
	 margin-left: -8px;
}
 .end-items h3 {
	 text-transform: uppercase;
	 padding: 20px 10px;
	 border-top: 2px solid #607d8b;
}
 .end-items ul {
	 padding: 0 10px;
}
 .brainstorm {
	 grid-area: brainstorm;
}
 .brainstorm h3 {
	 color: #4fc3f7;
}
 .end-items li {
	 padding: 10px 0 10px 0;
}
 .end-items a {
	 color: #fff;
}
 .fa-angle-up, .end-list {
	 display: none;
}
 .fa-angle-down, .fa-angle-up {
	 float: right;
}
 .support {
	 grid-area: support;
}
 .support h3 {
	 color: #ff8a65;
}
 .company {
	 grid-area: company;
}
 .company h3 {
	 color: #4db6ac;
}
 #sub input {
	 padding: 0.8rem;
	 width: 180px;
	 border: none;
	 border-top-right-radius: 0;
	 border-bottom-right-radius: 0;
	 margin: 0 0 0 10px;
}
 .subscribe {
	 grid-area: subscribe;
}
 .subscribe h3 {
	 color: #f06292;
}
 #sub button {
	 color: #000;
	 margin-left: -4px;
	 padding: 0.8rem;
	 width: 100px;
	 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
	 border-top-left-radius: 0;
	 border-bottom-left-radius: 0;
	 background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
 #facebook {
	 color: #3b5998;
	 margin-right: 10px;
}
 #twitter {
	 color: #1da1f2;
}
/* If the content is smaller than the minimum width, the minimum width will be applied. If the content is larger than the minimum width, the min-width property has no effect. If the content is larger than the maximum width, it will automatically change the height of the element. If the content is smaller than the maximum width, the max-width property has no effect. 
/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
/* Extra small devices (phones, 600px and down) */
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
	 header {
		 grid-template-areas: "logo dp gin";
	}
	 header #switch {
		 display: none;
	}
	 header .dropdown-content {
		 display: grid;
		 position: relative;
		 grid-template-rows: none;
		 border: none;
		 box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		 background-color: #fff;
	}
	 header .dropdown-content li {
		 padding: 0;
	}
	 header .dropdown-content li a {
		 color: #212121;
	}
	 header .dropdown-content li a:hover {
		 color: #03a9f4;
	}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
	 header {
		 grid-template-areas: "logo dp gin";
	}
	 header #switch {
		 display: none;
	}
	 header .dropdown-content {
		 display: grid;
		 position: relative;
		 grid-template-rows: none;
		 border: none;
		 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		 background-color: #fff;
	}
	 header .dropdown-content li {
		 padding: 0;
	}
	 header .dropdown-content li a {
		 color: #212121;
	}
	 header .dropdown-content li a:hover {
		 color: #03a9f4;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Grand+Hotel|Gugi|Lato|Montserrat|Open+Sans|Pacifico|Varela+Round|Arvo|Bungee|Bungee+Shade|Cabin|Concert+One|Copse|Cutive|IBM+Plex+Mono|Nunito|Nunito+Sans|Quattrocento|Quattrocento+Sans|Quicksand|Roboto|Roboto+Slab|Sanchez|Work+Sans"
  rel="stylesheet">
<script src="https://kit.fontawesome.com/062ee3baff.js"></script>
<script src="https://use.fontawesome.com/releases/v5.10.2/js/all.js" data-auto-replace-svg="nest"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css">


<body onload="myFunction()">
  <div class="site">
    <header>
      <div class="dropdown">
        <span id="switch">
            <i class="fas fa-bars"></i>
            <i class="fas fa-times"></i>
          </span>
        <ul class="dropdown-content">
          <li><a class="set" href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="ideas.html">Ideas</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="res.html">Resources</a></li>
        </ul>
      </div>
      <p id="logo">Brainstorm logo</p>
      <ul class="gin">
        <li><a class="signup" href="signup.html">Free Trial</a></li>
        <li><a class="login" href="login.html">Login</a></li>
      </ul>
    </header>
    <div class="title">
      <h1>Brainstorm</h1>
      <p>Create, share, and collaborate ideas.</p>
      <p>All beings develep, brainstorm, and work better together as a team.</p>
    </div>
    <div class="qaz">

    </div>
    <div class="qaz">

    </div>
    <div class="qaz">

    </div>
    <div class="qaz">

    </div>
    <div class="qaz">

    </div>
    <div class="end">
      <div class="end-items">
        <div class="brainstorm">
          <h3>brainstorm<span id="arrow-1"><i class="fas fa-angle-down"></i><i class="fas fa-angle-up"></i></span></h3>
          <ul id="bsm" class="end-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Download Brainstorm</a></li>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">Extensions</a></li>
            <li><a href="#">Updates</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Beta</a></li>
            <li><a href="#">Developer</a></li>
          </ul>
        </div>
        <div class="support">
          <h3>support<span id="arrow-2"><i class="fas fa-angle-down"></i><i class="fas fa-angle-up"></i></span></h3>
          <ul class="end-list">
            <li>
              <a href="#"></a>
            </li>
          </ul>
        </div>
        <div class="company">
          <h3>company<span id="arrow-3"><i class="fas fa-angle-down"></i><i class="fas fa-angle-up"></i></span></h3>
          <ul class="end-list">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Shop</a></li>
          </ul>
        </div>
        <div class="subscribe">
          <h3>Subscribe to our newletter</h3>
          <form id="sub" name="contact" method="POST" data-netlify="false">
            <input class="nsl" type="email" name="email" placeholder="Email Address">
            <button type="submit" name="subscribe">Subscribe</button>
          </form>
        </div>
        <div class="media">
          <h3>follow us</h3>
          <span id="folcon">
              <a href="#"><button id="instagram" class="social" type="follow" name="instagram"><span class="fa-stack fa-2x"><i class="fas fa-square fa-stack-2x"></i><i class="fab fa-instagram fa-stack-1x fa-inverse fa-3x"></i></span></button>
          </a>
          <a href="#"><button id="twitter" class="social" type="follow" name="twitter"><span class="fa-stack fa-2x"><i class="fas fa-square fa-stack-2x"></i><i class="fab fa-twitter fa-stack-1x fa-inverse fa-3x"></i></span></button></a>
          <a href="#"><button id="facebook" class="social" type="follow" name="facebook"><span class="fa-stack fa-2x"><i class="fas fa-square fa-stack-2x"></i><i class="fab fa-facebook fa-stack-1x fa-inverse fa-3x"></i></span></button></a>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="index.js" type='text/javascript'></script>
<script src="test.js" type='text/javascript'></script>

​

Answer 1

问题不在于您的li的间距不同。它们彼此之间的距离是相同的，而且它们的宽度都是一样的。您所看到的结果是:较短的单词在自己的li中比较长的单词有更多的额外空间，因此在较短的单词的右边有更多的空白，而在较长的单词的右侧则有更少的空白。

例如，查看以下内容：

// Width of one li.
|||||||||||

// Width of each li.
Home|||||||
About||||||
Ideas||||||
Projects|||
Resources||

// Width of all li when inline.
Home|||||||About||||||Ideas||||||Projects|||Resources||
Home       About      Ideas      Projects   Resources  

这个可视化应该会告诉您您所遇到的确切问题。你想要做的不是所有的li都有相同的宽度--你想要的是所有的li都有相同的距离。这是两件非常不同的事情。

如果您想要达到均匀间隔的结果，那么不要使用网格显示，否则列将保持相同的大小，并将产生额外的空白。相反，可以考虑使用类似于inline-block显示的东西，并设置一个margin或padding值。