Question

我有一个占用80％宽度的菜单，但是，当屏幕缩小（水平）时，水平列表会将最后的项目放在下面一行。

在水平收缩的情况下，我希望项目彼此更接近或者最终列表项目消失（＆lt; - 首选选项）。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
}

li {
    float: left;
}

li a {
    display: block;
    color: #808080;
    text-align: center;
    padding: 14px 30px 14px 0px;
    text-decoration: none;
    font-family: "open sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    color: #DDD;
}

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">Langley</a></li>
    <li><a href="#contact">Program</a></li>
    <li><a href="#about">About Lims</a></li>
    <li><a href="#contact">F.A.Q.</a></li>
    <li><a href="#about">News/Events</a></li>
    <li><a href="#about">Contact Us</a></li>
</ul>

Answer 1

只有在元素上有固定（或最大）高度时，溢出才有效。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 40px; /* <--- You need height to get overflow:hidden work */
    overflow: hidden;
    background-color: #fff;
}

li {
    float: left;
}

li a {
    display: block;
    color: #808080;
    text-align: center;
    padding: 14px 30px 14px 0px;
    text-decoration: none;
    font-family: "open sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    color: #DDD;
}

<ul>
          <li><a class="active" href="#home">Home</a></li>
          <li><a href="#news">Langley</a></li>
          <li><a href="#contact">Program</a></li>
          <li><a href="#about">About Lims</a></li>
          <li><a href="#contact">F.A.Q.</a></li>
          <li><a href="#about">News/Events</a></li>
          <li><a href="#about">Contact Us</a></li>
       </ul>

Answer 2

要使列表内联而不是使用float，您可以在CSS中使用display属性。在下面的代码段中查看添加了评论的更改。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  
  /* use ANY ONE of the following which suits  your requirement */
  
  display: -webkit-inline-box;
  
  /* display: -webkit-box; */
  /* display: inline-flex; */
}

li {
  /* Remove float left */
  /* float: left; */
}

li a {
  display: block;
  color: #808080;
  text-align: center;
  padding: 14px 30px 14px 0px;
  text-decoration: none;
  font-family: "open sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}


/* Change the link color to #111 (black) on hover */

li a:hover {
  color: #DDD;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Langley</a></li>
  <li><a href="#contact">Program</a></li>
  <li><a href="#about">About Lims</a></li>
  <li><a href="#contact">F.A.Q.</a></li>
  <li><a href="#about">News/Events</a></li>
  <li><a href="#about">Contact Us</a></li>
</ul>

Answer 3

您可以根据css申请media queries。例如，您的列表项断点为675px，因此您可以定位此screen size，并且您还可以定位另一个屏幕尺寸，这将是下一个断点，例如535px。这就是我的意思，

@media only screen and (max-width: 675px){
  li a{ padding: 14px 10px 14px 0px; }
}
/* If the browser window is 535px or smaller */
@media only screen and (max-width: 535px){
  li a{ padding: 14px 10px 14px 0px; font-weight: 300; font-size: 10px; }
}

以下是codepen

请注意，此列表项目最多只能工作424px，并且会在424px之后提示另一个断点，您可以针对此屏幕尺寸优化移动菜单。

当窗口水平收缩时，如何防止水平列表项垂直折叠？

3 个答案: