-2

我的里面有 6 个列表项ul，我正在制作一个导航菜单。因此，当屏幕尺寸低于 430 像素时，我想将所有 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>

请帮帮我，谢谢

4

3 回答 3

0

ul当断点命中时，我向您添加了 flexbox 。至于列表项，-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

于 2019-03-10T06:52:01.633 回答
0

使用flexbox对您有好处：

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

见小提琴

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>

于 2019-03-10T06:54:18.660 回答
-1

您可以尝试创建 css 样式表：一种用于标头中的 javascript 检测到屏幕大小超过 430 时，另一种用于以下情况。

于 2019-03-10T07:12:35.737 回答