html - 为什么当浏览器尺寸减小时 Flex 文本会重叠？

Question

如果您减小浏览器大小，“发现”和“工作原理”的文本会重叠，因此看起来像是“发现它工作”“如何”。

如何让这些 Li 元素的文本始终保持分开？我尝试执行 flex: nowrap 属性，但没有效果。

这是说明我的意思的代码笔:https://codepen.io/hiarooo/pen/GRrzapM

感谢您的帮助。

HTML

<header>
        <div class="container">
            <nav>
                <div class="left-content">
                    <div class="header-user">
                        <img src="HOME/DoLogo.png" alt="logo" width="50px">
                        <p><span>Do</span></p>
                    </div>
                    
                    <div class="header-tablet">
                        <div class="vl"></div>
                        <ul>
                            <li><a href="#">Discover</a></li>
                            <li><a href="#">How it works</a></li>
                        </ul>
                    </div>
                   
                </div>

                <div class="right-content">
                        <div class="search">
                            <input type="text" placeholder="Search">
                            <i class="fas fa-search"></i>
                        </div>
                        
                        <img id="notifications" src="HOME/Notification.svg" alt="Notification">
                        
                        <div class="header-user">
                            <img src="HOME/uploadnav.png" alt="user">
                            
                        </div>
                        <img class="mob" src="HOME/uploadnav.png" alt="user">
                        <a href="#" class="menu"><img src="HOME/menu.svg" alt="hamburgermenu"></a>
                </div>
            </nav>
            
            
        </div>
    </header>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 78%;
  margin: 0 auto;
}

@media (max-width: 1330px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

/* Header */

header {
  height: 80px;
  border: 1px solid #e6e8ec;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#notifications{
    padding-right:20px;
}



.search {
  display: inline;
  height: 40px;
  width: 256px;
  border-radius: 8px;
  padding: 10px 12px 10px 16px;
  border: 2px solid #e6e8ec;
  outline: none;
  display: flex;
  justify-content: space-between;
  margin-right: 18px;
  margin-left: 20px;
}

.search input {
  outline: none;
  border: none;
}

.search i {
  color: #777e90;
}

.search:hover {
  cursor: pointer;
}

.search input::-webkit-input-placeholder {
  font-family: "Poppins", sans-serif;
  color: #777e90;
  font-size: 12px;
}

.button {
  background-color: #3772ff;
  padding: 12px 16px;
  border-radius: 90px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #fcfcfd;
  text-decoration: none;
  margin-left: 18px;
  margin-right: 10px;
  display: inline;
}

.header-user {
  border-radius: 90px;
  padding: 4px 12px 4px 4px;
  border: 2px #e6e8ec solid;
  width: 147px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-user p {
  padding-left: 6px;
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}

.header-user span {
  color: #45b26b;
  padding-left: 2px;
}

.left-content {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.mob {
  display: none;
}

.vl {
  border-left: 2px #e6e8ec solid;
  height: 40px;
  margin: 0 32px;
}

.left-content ul {
  list-style: none;
}

.left-content ul li {
  display: inline;
}

.left-content ul li a {
  text-decoration: none;
  padding-right: 32px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #777e90;
}

.right-content {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.right-content img {
  cursor: pointer;
}

.menu {
  display: none;
}

.header-tablet {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
    
    
}




.topFont{
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23262f;
}



.btn-1 {
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23262f;
  border: 2px solid #e6e8ec;
  border-radius: 90px;
  display: inline-block;
  padding: 12px 16px;
  margin-bottom: 0px;
}

.btn-1:hover {
  background-color: #3772ff;
  color: #fcfcfd;
  /*border: none;*/
  transition:all .2s ease;
  -webkit-transition-delay:all .2s ease;
  -moz-transition-delay:all .2s ease;
  -ms-transition-delay:all .2s ease;
  -o-transition-delay:all .2s ease;
}


/* input */

.round {
  max-width: 100%;
  height: 48px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px #f4f4f4 solid;
  border-radius: 90px;
  margin: 20px 0px;
}

.round i {
  color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  line-height: 80px;
}

.round input {
  outline: none;
  border: none;
  padding-left: 16px;
}

.search-btn {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 12px;
}

.round input::-webkit-input-placeholder {
  font-family: "Poppins", sans-serif;
  color: #777e90;
  font-size: 12px;
}

.search-icon:hover {
  cursor: pointer;
  color: #3772ff;
}



@media (max-width: 1170px) {
 

  .round {
    width: 200px;
  }
}

@media (max-width: 960px) {
  

  .round {
    width: 200px;
  }
}

@media (max-width: 779px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }

    .header-tablet{
        display:none;
    }
  .search {
    display: none;
  }

  .menu {
    display: inline;
  }

  .button {
    display: none;
  }

  /* header user */
  .header-user {
    display: none;
  }

Answer 1

更改此 CSS 设置:

.left-content ul li {
  display: inline;
}

到

.left-content ul li {
  display: inline-block;
}

这样 li 元素的内容将形成一个(内联) block ，整个 block 只能换行。

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 78%;
  margin: 0 auto;
}

@media (max-width: 1330px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}


/* Header */

header {
  height: 80px;
  border: 1px solid #e6e8ec;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#notifications {
  padding-right: 20px;
}

.search {
  display: inline;
  height: 40px;
  width: 256px;
  border-radius: 8px;
  padding: 10px 12px 10px 16px;
  border: 2px solid #e6e8ec;
  outline: none;
  display: flex;
  justify-content: space-between;
  margin-right: 18px;
  margin-left: 20px;
}

.search input {
  outline: none;
  border: none;
}

.search i {
  color: #777e90;
}

.search:hover {
  cursor: pointer;
}

.search input::-webkit-input-placeholder {
  font-family: "Poppins", sans-serif;
  color: #777e90;
  font-size: 12px;
}

.button {
  background-color: #3772ff;
  padding: 12px 16px;
  border-radius: 90px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #fcfcfd;
  text-decoration: none;
  margin-left: 18px;
  margin-right: 10px;
  display: inline;
}

.header-user {
  border-radius: 90px;
  padding: 4px 12px 4px 4px;
  border: 2px #e6e8ec solid;
  width: 147px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-user p {
  padding-left: 6px;
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}

.header-user span {
  color: #45b26b;
  padding-left: 2px;
}

.left-content {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.mob {
  display: none;
}

.vl {
  border-left: 2px #e6e8ec solid;
  height: 40px;
  margin: 0 32px;
}

.left-content ul {
  list-style: none;
}

.left-content ul li {
  display: inline-block;
}

.left-content ul li a {
  text-decoration: none;
  padding-right: 32px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #777e90;
}

.right-content {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.right-content img {
  cursor: pointer;
}

.menu {
  display: none;
}

.header-tablet {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
}

.topFont {
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23262f;
}

.btn-1 {
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23262f;
  border: 2px solid #e6e8ec;
  border-radius: 90px;
  display: inline-block;
  padding: 12px 16px;
  margin-bottom: 0px;
}

.btn-1:hover {
  background-color: #3772ff;
  color: #fcfcfd;
  /*border: none;*/
  transition: all .2s ease;
  -webkit-transition-delay: all .2s ease;
  -moz-transition-delay: all .2s ease;
  -ms-transition-delay: all .2s ease;
  -o-transition-delay: all .2s ease;
}


/* input */

.round {
  max-width: 100%;
  height: 48px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px #f4f4f4 solid;
  border-radius: 90px;
  margin: 20px 0px;
}

.round i {
  color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  line-height: 80px;
}

.round input {
  outline: none;
  border: none;
  padding-left: 16px;
}

.search-btn {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 12px;
}

.round input::-webkit-input-placeholder {
  font-family: "Poppins", sans-serif;
  color: #777e90;
  font-size: 12px;
}

.search-icon:hover {
  cursor: pointer;
  color: #3772ff;
}

@media (max-width: 1170px) {
  .round {
    width: 200px;
  }
}

@media (max-width: 960px) {
  .round {
    width: 200px;
  }
}

@media (max-width: 779px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
  .header-tablet {
    display: none;
  }
  .search {
    display: none;
  }
  .menu {
    display: inline;
  }
  .button {
    display: none;
  }
  /* header user */
  .header-user {
    display: none;
  }

<header>
  <div class="container">
    <nav>
      <div class="left-content">
        <div class="header-user">
          <img src="HOME/DoLogo.png" alt="logo" width="50px">
          <p><span>Do</span></p>
        </div>

        <div class="header-tablet">
          <div class="vl"></div>
          <ul>
            <li><a href="#">Discover</a></li>
            <li><a href="#">How it works</a></li>
          </ul>
        </div>

      </div>

      <div class="right-content">
        <div class="search">
          <input type="text" placeholder="Search">
          <i class="fas fa-search"></i>
        </div>

        <img id="notifications" src="HOME/Notification.svg" alt="Notification">

        <div class="header-user">
          <img src="HOME/uploadnav.png" alt="user">

        </div>
        <img class="mob" src="HOME/uploadnav.png" alt="user">
        <a href="#" class="menu"><img src="HOME/menu.svg" alt="hamburgermenu"></a>
      </div>
    </nav>


  </div>
</header>