css 为什么flexbox在我的网站上不能正常工作？

oxcyiej7 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(123)

我找不到为什么flex-end在我的网站上不工作，我知道有什么东西打断了它，但我就是找不到它。
对于任何有兴趣帮助的人，这里的代码，我试图只对齐navbar-links-end和navbar-links-middle到navbar的结尾：
这就是你应该知道的所有细节，如果还有什么其他的只是发表评论，我会尽快回答我可以

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 70px;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;
}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  margin-left: auto;
  width: auto;
}

<nav class="navbar">
  <img class="navbar-logo" src="images/intel-header-logo.png">
  <ol class="navbar-links-left">
    <li class="navbar-link">
      <p>PRODUCTS</p>
    </li>
    <li class="navbar-link">
      <p>SUPPORT</p>
    </li>
    <li class="navbar-link">
      <p>SOLUTIONS</p>
    </li>
    <li class="navbar-link">
      <p>DEVELOPERS</p>
    </li>
    <li class="navbar-link">
      <p>PARTNERS</p>
    </li>
  </ol>

  <ol class="navbar-links-middle">
    <li class="navbar-link">
      <i class="far fa-user"></i>
    </li>
    <li class="navbar-link">
      <i class="fa-solid fa-globe"></i>
    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>USA (ENGLISH)</p>
    </li>
  </ol>

  <ol class="navbar-links-end">
    <li class="navbar-link">
      <i class="fa-solid fa-magnifying-glass"></i>

    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>Search: Intel.com</p>
    </li>
  </ol>
</nav>

css

来源：https://stackoverflow.com/questions/75954051/why-isnt-flexbox-working-as-intended-on-my-site

2条答案

按热度按时间

mlmc2os51#

为什么有.navbar{width:70px}？应该是100%：

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 100%;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;

}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center; /* add this property */
  width: auto;

}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center; /* add this property */
  width: auto;
}

.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center; /* add this property */
  margin-left: auto;
  width: auto;

}

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>


    <nav class="navbar">
        <img class="navbar-logo" src="images/intel-header-logo.png">
        <ol class="navbar-links-left">
            <li class="navbar-link">
                <p>PRODUCTS</p>
            </li>
            <li class="navbar-link">
                <p>SUPPORT</p>
            </li>
            <li class="navbar-link">
                <p>SOLUTIONS</p>
            </li>
            <li class="navbar-link">
                <p>DEVELOPERS</p>
            </li>
            <li class="navbar-link">
                <p>PARTNERS</p>
            </li>
        </ol>

        <ol class="navbar-links-middle">
            <li class="navbar-link">
                <i class="far fa-user"></i>
            </li>
            <li class="navbar-link">
                <i class="fa-solid fa-globe"></i>
            </li>
            <li class="navbar-link" style="white-space: nowrap;">
                <p>USA (ENGLISH)</p>
            </li>
        </ol>

        <ol class="navbar-links-end">
            <li class="navbar-link">
                <i class="fa-solid fa-magnifying-glass"></i>
                
            </li>
            <li class="navbar-link" style="white-space: nowrap;">
                <p>Search: Intel.com</p>
            </li>
        </ol>
    </nav>


</body>
</html>

赞(0）回复(0）举报 2023-04-08

beq87vna2#

将.navbar更改为width: 100%;。
删除.navbar-links-end上的margin-left: auto;，并将其放在.navbar-links-middle上。

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 100%;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;
}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  margin-left: auto;
  width: auto;
}

.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

<head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<nav class="navbar">
  <img class="navbar-logo" src="images/intel-header-logo.png">
  <ol class="navbar-links-left">
    <li class="navbar-link">
      <p>PRODUCTS</p>
    </li>
    <li class="navbar-link">
      <p>SUPPORT</p>
    </li>
    <li class="navbar-link">
      <p>SOLUTIONS</p>
    </li>
    <li class="navbar-link">
      <p>DEVELOPERS</p>
    </li>
    <li class="navbar-link">
      <p>PARTNERS</p>
    </li>
  </ol>

  <ol class="navbar-links-middle">
    <li class="navbar-link">
      <i class="far fa-user"></i>
    </li>
    <li class="navbar-link">
      <i class="fa-solid fa-globe"></i>
    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>USA (ENGLISH)</p>
    </li>
  </ol>

  <ol class="navbar-links-end">
    <li class="navbar-link">
      <i class="fa-solid fa-magnifying-glass"></i>

    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>Search: Intel.com</p>
    </li>
  </ol>
</nav>

赞(0）回复(0）举报 2023-04-08

我来回答

css 为什么flexbox在我的网站上不能正常工作？

2条答案

相关问题

热门标签

最新问答