导航的背景色在缩放时剪切

Question

大家好，我是编码新手，我的导航栏需要一些帮助我在我的 css "white-space: nowrap;" 上使用以避免在我的导航栏上换行，然后当我向右滚动时，在我的缩放页面上背景颜色被剪切

你能帮我把背景颜色完全放在右边吗？欢迎咨询或咨询！谢谢

我的html

  <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Conférence des directeurs des écoles doctorales de droit</title>
    <link rel="stylesheet" href="css/master.css">
  </head>
  <body>
      <nav><ul>
        <li><a href="#">Présentation</li>
        <li><a href="#">Liste des ED</li>
        <li><a href="#">Documents</li>
        <li><a href="#">Liens</li>
        <li><a href="#">Infomations/IP</li>
        <li><input id=search-button type="submit" name="search_button">
            <input id=search-box type="text" name="search_box" placeholder="Rechercher..."></li>
      </ul></nav>

  </body>
</html>

my css

 @font-face {
    font-family: "Quicksand Light Regular";
    src: url('quicksand_light-webfont.woff');
}

nav {
    position: absolute;
    background-color: darkred;
    top: 0;
    right: 0;
    left: 0;
    white-space: nowrap;
    text-align: center;
    max-width: 100%;
    zoom: 1;
}

nav li {
    font-family: "Quicksand Light Regular";
    font-weight: bold;
    display: inline-block;
    margin-right: 45px;

}

a {
    color: white;
    text-decoration: none;
}

Answer 1

只需在 nav

的 CSS 规则中将 max-width: 100% 更改为 width: 100%

Answer 2

尝试改用灵活的盒子。

下面的示例从使用 ul 和 li 更改为使用简单的 div 元素来创建自动适应任何大小的 flexboxes space （参见示例）

编辑

已更改 HTML：

删除了 UL 和 LI 标签
将 <UL> 替换为 <div id="menu">，将 <LI> 替换为 <div>

已更改的 CSS 属性列表：

max-width: 100% 改为 min-width: 100%
已将 nav 重命名为 #menu
为 #menu 添加了两个新规则（一个用于 flex box，另一个只是替换旧的 nav 规则）
将 nav li 规则重命名为 nav div div 规则
从 nav div div 中删除了 margin-right: 45px，将其替换为 margin-left 和 margin-right 属性。

@font-face {
  font-family: "Quicksand Light Regular";
  src: url('quicksand_light-webfont.woff');
}

#menu {
  position: absolute;
  background-color: darkred;
  top: 0;
  right: 0;
  left: 0;
  white-space: nowrap;
  text-align: center;
  zoom: 1;
  min-width: 100%;   // notice I changed max-width to min-width
}

#menu {
  display: flex;
  flex-direction: horizontal;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}

nav div div {
  font-family: "Quicksand Light Regular";
  font-weight: bold;
  margin-right: 15px;
  margin-left: 15px;
}

a {
  color: white;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Conférence des directeurs des écoles doctorales de droit</title>
  <link rel="stylesheet" href="css/master.css">
</head>

<body>
  <br>
  <nav>
    <div id="menu">
      <div><a href="#">Présentation</div>
        <div><a href="#">Liste des ED</div>
        <div><a href="#">Documents</div>
        <div><a href="#">Liens</div>
        <div><a href="#">Infomations/IP</div>
        <div><input id=search-button type="submit" name="search_button">
            <input id=search-box type="text" name="search_box" placeholder="Rechercher..."></div>
      </div></nav>

  </body>
</html>

Answer 3

谢谢@mike510a，但我想找到问题的解决方案，这样我才能面对它而不是找到替代方案真的很有用：以此为例：

> <!DOCTYPE html> <html>   <head>
>     <meta charset="utf-8">
>     <title>Test</title>
>     <link rel="stylesheet" href="css.css">   </head>   <body>
>     <nav>
>       <ul>
>         <li>test1</li>
>         <li>test2</li>
>         <li>test3</li>
>         <li>test4</li>
>         <li>test5</li>
>         <li>test6</li>
>         <li>test7</li>
>         <li>test8</li>
>         <li>test9</li>
>         <li>test10</li>
>       </ul>
>     </nav>
> 
>   </body> </html>

和 css :

> nav {   position: absolute;   background-color: blue;   width: 100%;  
> text-align: center;   white-space: nowrap; } li {   display:
> inline-block; }

我有同样的问题...

Answer 4

有人为我找到了解决方案我不得不删除 right : 0; 并添加 min-width:100%; 谢谢大家

nav {
background-color: darkred;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
white-space: nowrap;
text-align: center;

}

导航的背景色在缩放时剪切

nav's background-color cut when zoom

html

css

background-color

navbar