Html 调整容器宽度时对导航栏的不希望的影响

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

这是我正在进行的工作：（你能看到吗？）。基本上，它只是一个导航栏，一些元素漂浮在左边，右边有一个标志，中间有一个标志。 这就是问题所在：

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

是否与浮动和清算有关？我不知道如何摆脱这种局面

html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.集装箱{
保证金：自动；
宽度：100%
}
身体{
保证金：0；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
位置：固定；
排名：0；
宽度：100%；
}
李{
浮动：左；
字体大小：粗体；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
伊姆盖德先生{
文本对齐：居中；
垫面：0.5%；
}
.导航头{
边框：1px实心rgba（0,0,0,0.3）；
高度：50px；
}
.按钮头1{
利润率：10px；
填充：8px 10px；
背景色：#6288A5；
边框：1px实心#4D7B9F；
边界半径：3px；
颜色：#fff；
右边距：80px；
明确：两者皆有；
}
.按钮头2{
利润率：10px；
填充：8px 10px；
背景色：#6288A5；
边框：1px实心#4D7B9F；
边界半径：3px；
颜色：#fff；
明确：两者皆有；
}
.按钮左{
利润率：10px；
填充：8px 10px；
背景色：白色；
边框：1px实心#4D7B9F；
边界半径：3px；
颜色：黑色！重要；
字体大小：粗体；
}

部分




登录
订阅

我认为这是因为您的

.container

子

ul

是

位置：固定的
，因此有
宽度
引用文档，而不是其父文档。
如果同时将
ul
宽度更新为80%，则工作正常

将
容器的
位置：固定的
替换为
位置：绝对的

给出
位置：相对到您的
navheader

始终是视口，这就是它不会停留在
.navheader
中的原因。但是，如果您给它
位置：绝对
，它的位置将由具有
位置：相对


html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.集装箱{
保证金：自动；
宽度：100%
}
身体{
保证金：0；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
位置：绝对位置；
排名：0；
宽度：100%；
}
李{
浮动：左；
字体大小：粗体；
}
李阿{
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
伊姆盖德先生{
文本对齐：居中；
垫面：0.5%；
}
.导航头{
位置：相对位置；
边框：1px实心rgba（0,0,0,0.3）；
高度：50px；
}
.按钮头1{
利润率：10px；
填充：8px 10px；
背景色：#6288A5；
边框：1px实心#4D7B9F；
边界半径：3px；
颜色：#fff；
右边距：80px；
明确：两者皆有；
}
.按钮头2{
利润率：10px；
填充：8px 10px；
背景色：#6288A5；
边框：1px实心#4D7B9F；
边界半径：3px；
颜色：#fff；
明确：两者皆有；
}
.按钮左{
利润率：10px；
填充：8px 10px；
背景色：白色；
边框：1px实心#4D7B9F；
边界半径：3px；
颜色：黑色！重要；
字体大小：粗体；
}


部分




登录
订阅