Div不在div中

Question

我有一个div里面有几个div。 div中的这些div不是div，而是高度正常 这是页面标尺的屏幕和页面屏幕

.navbar {
  width: 97%;
  padding-left: 2%;
  padding-right: 1%;
  padding-top: 0.2%;
  padding-bottom: 0.2%;
  display: block;
  border: none;
}
.navbar .item {
  display: inline-block;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  background: -webkit-linear-gradient(#fcfcfc 50%, #eee);
  background: -o-linear-gradient(#fcfcfc 50%, #eee);
  background: linear-gradient(#fcfcfc 50%, #eee);
  border: 1px solid #d5d5d5;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 0.75%;
  padding-right: 0.75%;
  height: inherit;
  border-radius: 10px;
}

 <h1>yourword</h1>
<div class="navbar">
  <div class="item left">Home</div>
  <div class="item left">About</div>
  <div class="item right">Action</div>
</div>

Answer 1

将您的CSS更改为：

<强> CSS

.navbar{
  width:97%;
  padding-left: 2%;
  padding-right: 1%;
  padding-top:0.2%;
  padding-bottom:0.2%;
  display: block;
  border:none;
}
.navbar > .item{
    display:inline-block;
    padding-top:0.5%;
    padding-bottom:0.5%;
    background: -webkit-linear-gradient(#fcfcfc 50%, #eee);
    background: -o-linear-gradient(#fcfcfc 50%, #eee);
    background: linear-gradient(#fcfcfc 50%, #eee);
    border:1px solid #d5d5d5;
    margin-left:1%;
    margin-right:1%;
    padding-left:0.75%;
    padding-right:0.75%;
    height:inherit;
    border-radius: 10px;
  }

.navbar {
  width: 97%;
  padding-left: 2%;
  padding-right: 1%;
  padding-top: 0.2%;
  padding-bottom: 0.2%;
  display: block;
  border: none;
}
.navbar > .item {
  display: inline-block;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  background: -webkit-linear-gradient(#fcfcfc 50%, #eee);
  background: -o-linear-gradient(#fcfcfc 50%, #eee);
  background: linear-gradient(#fcfcfc 50%, #eee);
  border: 1px solid #d5d5d5;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 0.75%;
  padding-right: 0.75%;
  height: inherit;
  border-radius: 10px;
}

<h1>yourword</h1>
<div class="navbar">
  <div class="item left">Home</div>
  <div class="item left">About</div>
  <div class="item right">Action</div>
</div>

Answer 2

你要写.item作为.navbar的后代，因为你不能以这种方式将css嵌套在彼此之内。

.navbar {
  width: 97%;
  padding-left: 2%;
  padding-right: 1%;
  padding-top: 0.2%;
  padding-bottom: 0.2%;
  display: block;
  border: none;
}
.navbar .item {
  display: inline-block;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  background: -webkit-linear-gradient(#fcfcfc 50%, #eee);
  background: -o-linear-gradient(#fcfcfc 50%, #eee);
  background: linear-gradient(#fcfcfc 50%, #eee);
  border: 1px solid #d5d5d5;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 0.75%;
  padding-right: 0.75%;
  height: inherit;
  border-radius: 10px;
}

<h1>yourword</h1>
<div class="navbar">
  <div class="item left">Home</div>
  <div class="item left">About</div>
  <div class="item right">Action</div>
</div>

Answer 3

我将假设课程left和right声明float值是左右。

您需要将overflow: hidden;添加到.navbar。这将创建一个块格式化上下文，navbar现在将使它的高度受到浮动元素的影响。