Question

在调整浏览器窗口大小后，当浏览器达到最小尺寸时，此站点导航栏中的最后一个<li>元素将始终跳转到新行，而不是所有元素保持在行中。我已经尝试过最小化边距和填充，但它还没有解决问题。

我在Web开发类的CSS部分，我们被要求使用max-width和mid-width属性以及百分比来调整我们练习站点的主要部分（让我们习惯使用百分比等），我觉得这必须是问题的一部分。

任何想法都非常感激。我也尝试调整空白属性，将<nav>包装在另一个div中等等。不确定出了什么问题。

<!DOCTYPE html>
<html>

<head>

  <!-- font-family: 'Open Sans', sans-serif; -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <style type="text/css">
    * {
      font-family: 'Open Sans', sans-serif;
    }
    * {
      list-style-type: none;
    }
    /* Section Sizes */
    body {
      background-color: #ffffff;
      margin: 0;
      padding: 0;
      width: 100%;
      min-width: 480px;
    }
    header {
      width: 100% min-width: 480px;
      height: 4rem;
    }
    .width,
    #container {
      min-width: 480px;
      max-width: 1080px;
      margin: 0 auto;
      width: 100%;
    }
    .width:after,
    #container:after,
    header:after,
    ul:after,
    li:after,
    #articles:after {
      display: table;
      content: "";
      clear: both;
    }
    /* Header Styles */
    header {
      border-bottom: 1px solid #0099cc;
      margin-bottom: 4rem;
    }
    header .width h1 {
      float: left;
      margin: 0;
      margin-right: 5rem;
      margin-top: 0.7rem;
      color: #ce6d0b;
      font-size: 1.4rem;
      font-weight: 400;
      padding: 0;
    }
    header .width ul {
      bottom: 0;
      padding: 0;
    }
    header .width ul li {
      float: left;
    }
    header .width ul li:last-child {
      padding-right: 0;
    }
    header .width ul li a {
      color: #8c8c8c;
      text-decoration: none;
      border-bottom: 10px solid transparent;
      font-size: 1.1rem;
      display: block;
      text-align: center;
      padding: 0.95rem 1.5rem;
    }
    header .width ul li a:hover {
      border-bottom: 10px solid #0099cc;
      color: #404040;
    }
    header .width ul .active a {
      color: #404040;
      border-bottom: 10px solid #0099cc;
    }
  </style>

</head>

<body>

  <!-- global site header -->
  <header>
    <div class="width">
      <h1>Mockup 2</h1>
      <nav>
        <ul>
          <li class="active"><a href="#" title="Dashboard">Dashboard</a>
          </li>
          <li><a href="#" title="Section 2">Section 2</a>
          </li>
          <li><a href="#" title="Section 3">Section 3</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

</body>

</html>

http://jsbin.com/vahemoy/edit?html,output

谢谢。

Answer 1

如果没有足够的空间，带有float: left的元素将像文本一样包裹。你要做的就是确保容器内的所有元素总是有足够的空间。在这种情况下，我li的最后一次572px换行，但您min-width设置为480px。

尝试增加min-width。然后，当窗口缩小时，您将获得一个滚动条以查看其余内容，而不是将其换行。

当我缩小浏览器窗口时，为什么标题中的<li> <nav>元素会逐步降低？

1 个答案: