Question

我是初学者，我正在做这个练习，我必须创建一个顶级导航栏。

这是我正在进行的工作：https://jsfiddle.net/naufragio/kscty1zh/（你看到了吗？）。基本上它只是一个导航栏，其中一些元素向左浮动，另一个向右浮动，中间有一个徽标。

这就是问题所在：

如果在.container选择器的CSS规则中，我将width属性从100％（当前值）更改为80％，那么所有元素都会根据需要进行相应调整，除了在栏右侧浮动的元素，不要相应调整。

它与浮动和清算有关吗？我不知道如何摆脱这种情况......

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>

Answer 1

将position: fixed替换为position: absolute。
将.container提供给您的position: relative;

position: fixed始终是视口，因此它不会留在navheader内。但是，如果您给它.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;
}

请参阅：https://jsfiddle.net/3ajch21r/2/

Answer 2

我认为这是因为您的.container子ul为position:fixed，因此width引用了该文档，而不是他的父母。如果您还将ul宽度更新为80％，那么它的工作正常。

调整.container宽度时，导航栏上的不受欢迎的效果

2 个答案: