0
私は初心者です。私はトップのナビゲーションバーを作成する必要があるこの練習をしています。リサイズ時のナビゲーションバーに対する望ましくない影響
これは私の仕事です：https://jsfiddle.net/naufragio/kscty1zh/（あなたはそれを見ることができますか？）基本的には、いくつかの要素が左に浮かび、もう一つは右に、ロゴは真ん中にあるナビゲーションバーです。
そしてこれは問題である。
.containerセレクタにおいてCSSルールで私が好きなすべての要素がそれに応じて調整され、次いで、100％（現在値）から80％まで幅プロパティを変更した場合、バーの右側に浮かんでいる要素とは別に、それに応じて調整されません。
フローティングとクリアに関連していますか？私はあなたの.container子供ulがposition:fixedあるので、width文書への参照ではなくを持っているので、これがあると思い
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>