我是初学者，我正在做这个练习，我必须创建一个顶部导航栏。
这是我正在进行的工作:https://jsfiddle.net/naufragio/kscty1zh/ (你能看见它吗？)。基本上它只是一个导航栏，其中一些元素向左浮动，另一些向右浮动，中间有一个 Logo 。
这就是问题所在:
如果在 .container 选择器的 CSS 规则中，我将宽度属性从 100%(当前值)更改为 80%，那么除了 float 在条形右侧的元素外，所有元素都会根据需要进行相应调整, 不会相应调整。
与浮清有关吗？我不知道如何摆脱这种情况...
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
margin: auto;
width: 100%
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
font-weight: bold;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.imgheader {
text-align: center;
padding-top: 0.5%;
}
.navheader {
border: 1px solid rgba(0, 0, 0, 0.3);
height: 50px;
}
.buttonheader1 {
margin: 10px;
padding: 8px 10px;
background-color: #6288A5;
border: 1px solid #4D7B9F;
border-radius: 3px;
color: #fff;
margin-right: 80px;
clear: both;
}
.buttonheader2 {
margin: 10px;
padding: 8px 10px;
background-color: #6288A5;
border: 1px solid #4D7B9F;
border-radius: 3px;
color: #fff;
clear: both;
}
.buttonleft {
margin: 10px;
padding: 8px 10px;
background-color: white;
border: 1px solid #4D7B9F;
border-radius: 3px;
color: black !important;
font-weight: bold;
}<body>
<div class="container">
<div class="nav">
<div class="navheader">
<div class="leftheader">
<ul>
<li style="float:left"><button class="buttonleft" type="button">SECTIONS</button></li>
<li style="float:left"><a href="#home">HOME</a></li>
<li style="float:left"><a href="#news">SEARCH</a></li>
</ul>
</div>
<div class="rightheader">
<ul>
<li style="float:right"><button class="buttonheader1" type="button">LOG IN</button></li>
<li style="float:right"><button class="buttonheader2" type="button">SUBSCRIBE</button></li>
</ul>
</div>
<div class="imgheader">
<img src="logo.png" alt="logo">
</div>
</div>
<div class="navarticles">
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>最佳答案
- 将
position: fixed替换为position: absolute用于您的.container。 - 将
position: relative;给你的navheader
position: fixed始终是视口(viewport)，这就是为什么它不会留在您的 .navheader 中的原因。但是，如果您给它 position: absolute，它的位置将由下一个具有 position: relative
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
margin: auto;
width: 100%
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
li {
float: left;
font-weight: bold;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.imgheader {
text-align: center;
padding-top: 0.5%;
}
.navheader {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 50px;
}
.buttonheader1 {
margin: 10px;
padding: 8px 10px;
background-color: #6288A5;
border: 1px solid #4D7B9F;
border-radius: 3px;
color: #fff;
margin-right: 80px;
clear: both;
}
.buttonheader2 {
margin: 10px;
padding: 8px 10px;
background-color: #6288A5;
border: 1px solid #4D7B9F;
border-radius: 3px;
color: #fff;
clear: both;
}
.buttonleft {
margin: 10px;
padding: 8px 10px;
background-color: white;
border: 1px solid #4D7B9F;
border-radius: 3px;
color: black !important;
font-weight: bold;
}<body>
<div class="container">
<div class="nav">
<div class="navheader">
<div class="leftheader">
<ul>
<li style="float:left"><button class="buttonleft" type="button">SECTIONS</button></li>
<li style="float:left"><a href="#home">HOME</a></li>
<li style="float:left"><a href="#news">SEARCH</a></li>
</ul>
</div>
<div class="rightheader">
<ul>
<li style="float:right"><button class="buttonheader1" type="button">LOG IN</button></li>
<li style="float:right"><button class="buttonheader2" type="button">SUBSCRIBE</button></li>
</ul>
</div>
<div class="imgheader">
<img src="logo.png" alt="logo">
</div>
</div>
<div class="navarticles">
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>关于html - 调整 .container 宽度时对导航栏产生不良影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45800043/