导航的背景色在缩放时剪切
nav's background-color cut when zoom
大家好,我是编码新手,我的导航栏需要一些帮助
我在我的 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;
}
只需在 nav
的 CSS 规则中将 max-width: 100%
更改为 width: 100%
尝试改用灵活的盒子。
下面的示例从使用 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>
谢谢@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; }
我有同样的问题...
有人为我找到了解决方案
我不得不删除 right : 0;
并添加 min-width:100%;
谢谢大家
nav {
background-color: darkred;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
white-space: nowrap;
text-align: center;
}
大家好,我是编码新手,我的导航栏需要一些帮助 我在我的 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;
}
只需在 nav
max-width: 100%
更改为 width: 100%
尝试改用灵活的盒子。
下面的示例从使用 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>
谢谢@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; }
我有同样的问题...
有人为我找到了解决方案
我不得不删除 right : 0;
并添加 min-width:100%;
谢谢大家
nav {
background-color: darkred;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
white-space: nowrap;
text-align: center;
}