Question

我正在将我的网页拆分为.left-side和.right-side .right-side将导航固定到顶部。已经很难让导航成为其父.right-side的全宽，所以我不得不使用width: inherit, left: inherit。

到目前为止这么好，看起来很棒！

现在，父级可以使用类active将其宽度增加到100％。具有宽度继承的子导航不响应该更改。

看看：

.right-side{
  padding-top: 190px;
  width: 83.33333333%;
  float: right;
  display: block;
  position: relative;
  background-color: #fff;
  transition: width 0.5s;
}
.right-side.active{
  width: 100%;
}
nav.navbar {
  background-color: #F1ECD8;
  width: inherit;
  right: 0px;
  left: inherit;
}

右侧在添加课程active时会做出响应，但导航不会更多或相应更改。我该如何解决这个问题？

我应该提一下，当我在chrome dev工具中手动执行此操作时，此功能正常。

Answer 1

试试这个：

.right-side{
  padding-top: 190px;
  width: 83.33333333%;
  float: right;
  display: block;
  position: relative;
  background-color: #fff;
  transition: width 0.5s;
}
.right-side.active{
  width: 100%;
}
nav.navbar {
  background-color: #F1ECD8;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
}

Answer 2

简单的解决方案：将nav.navbar更改为width:100%。它将占用其父项的100％，即.right-side

不那么容易吞下的解决方案：考虑 NOT 使用浮点数进行布局， NOT 使用非语义类名称，例如left-side ，right-side为您的元素。如果你使用display:inline-block甚至是flexbox进行布局，你会发现你遇到的问题很少。

CSS继承不响应父元素的更改

2 个答案: