我的ul里面有6个li元素，我只想让所有的li在屏幕尺寸低于430时分成2行

Question

我的ul里面有6个列表项，我正在制作导航菜单。因此，当屏幕尺寸低于430px时，我想将所有6个列表项分解为两行（每行将有3个列表项）。

我在这里添加了代码

body {
  font-family: Arial, sans-serif;
  padding: 4px;
  text-align: center;
}

h1 {
  text-align: center;
  font-weight: normal;
}

nav {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  width: 100%;
  margin-bottom: 20px;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #616161;
  padding: 10px 0;
}

nav {
  display: table;
  table-layout: fixed;
}

ul {
  display: table-row;
}

ul li {
  display: table-cell;
}

.x {
  display: none;
}

.p {
  text-align: center;
  font-size: 14px;
  margin-top: 80px;
}

.d {
  color: #ccc;
}

@media (max-width: 430px) {
  
  nav {
    font-size: .8em;
  }
  
  nav ul li {
    display: fluid;
    border-bottom: 1px solid #ccc;
  }

}

<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li class="start"><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li class="end"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

请帮帮我，谢谢

Answer 1

使用flexbox对你有好处：

与li{flex: 1 0 15%;}和@media使用：flex: 1 0 25%;和flex-wrap: wrap;

See fiddle

body {
  font-family: Arial, sans-serif;
  padding: 4px;
  text-align: center;
}

h1 {
  text-align: center;
  font-weight: normal;
}

nav {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  width: 100%;
  margin-bottom: 20px;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  flex: 1 0 15%;
  list-style: none;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #616161;
  padding: 10px 0;
}


.x {
  display: none;
}

.p {
  text-align: center;
  font-size: 14px;
  margin-top: 80px;
}

.d {
  color: #ccc;
}

@media (max-width: 430px) {
  nav {
    font-size: .8em;
  }
  ul{
    flex-wrap: wrap;
  }
  nav ul li {
    flex: 1 0 25%;
    border-bottom: 1px solid #ccc;
  }
}

<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li class="start"><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li class="end"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Answer 2

当断点击中时，我将flexbox添加到你的ul。至于列表项，此行中的-2px占您正在使用的边界的2px。

width: calc(100% / 3 - 2px);

如果你看这个时刻的另一个答案，你会看到项目对齐的不均匀性。

为了解决这个问题，我还添加了以下规则：

  nav ul li:first-child {
    border-left: 1px solid transparent;
  }

body {
  font-family: Arial, sans-serif;
  padding: 4px;
  text-align: center;
}

h1 {
  text-align: center;
  font-weight: normal;
}

nav {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  width: 100%;
  margin-bottom: 20px;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #616161;
  padding: 10px 0;
}

nav {
  display: table;
  table-layout: fixed;
}

ul {
  display: table-row;
}

ul li {
  display: table-cell;
}

.x {
  display: none;
}

.p {
  text-align: center;
  font-size: 14px;
  margin-top: 80px;
}

.d {
  color: #ccc;
}

@media screen and (max-width: 430px) {
  
  nav {
    font-size: .8em;
  }
  
  nav ul {
    display: flex;
    flex-wrap: wrap;
  }
  
  nav ul li {
    width: calc(100% / 3 - 2px);
    border-bottom: 1px solid #ccc;
  }

  nav ul li:first-child {
    border-left: 1px solid transparent;
  }
}

<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li class="start"><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li class="end"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

jsFiddle

Answer 3

您可以尝试创建到css样式表：一个用于标题中的javascript检测到超过430的屏幕大小和下面的一个。