CSS 选择器（我认为）- 按钮不进入 Div 元素？答案

【问题标题】：CSS Selectors (I think) - Button not going into Div Element?CSS 选择器（我认为）- 按钮不进入 Div 元素？
【发布时间】：2016-05-23 02:31:35
【问题描述】：

我对 HTML/CSS 非常陌生，我只是不明白为什么我的按钮不会进入我的 div（称为框）。我尝试过同时使用 .box .btn 和 .box 按钮（以及大约一百万个其他东西，包括切换 ID 和移动部件），但没有任何效果。

请帮忙！

这是我的 HTML：

<body>
    <div class="wrap">

    <div id="Nav">

    <p> Library </p>

    <ul>
      <li><img src="img/glyph.jpg" alt="glyph"></li>
      <li><img src="img/glyph.jpg" alt="glyph"></li>
      <li><img src="img/glyph.jpg" alt="glyph"></li>
    </ul>

  </div>

  <div class="box" id="Box1">
    <div class="header1"><span class="time">3 Hours</span></div>
    <div class="btn"><button type=button>Intermediate</button></div>
  </div>


  <div class="box" id="Box2">
    <div class="header2"><span class="time">2 Hours</span></div>
    <div class="btn"><button type=button>Intermediate</button></div>
  </div>

  <div class="box" id="Box3">
    <div class="header3"><span class="time">97.4 Hours</span></div>
    <div class="btn"><button type=button>Intermediate</button></div>
  </div>

  <div class="box" id="Box4">
    <div class="header4"><span class="time">Like, Forever Hours</span> 

   </div>
    <div class="btn"><button type=button>Intermediate</button></div>
   </div>

   </div>

   </body>

还有我的 CSS：

body,
html {
  margin: 0;
  padding: 0;
  color: #000;
  background: #FFFFFF;
}


.wrap {
  height: 800px;
  width: 1110px;
  margin: 100px;
  background-color: #EDEFF0;
}

#Nav {
  height: 70px;
  width: 1070px;
  margin: 15px;
  padding: 0;
  background-color: #EDEFF0;
  border-bottom-style:inset;
  border-color: #C7C9C9;
}

#Nav p {
  width: 70px;
  height: 20px;
  margin-top: 27.5px;
  float: left;
  font-size: 20px;
  font-family: sans-serif;
  color:#374048;
}

#Nav ul {
  list-style-type: none;
  display: inline;
}

#Nav li {
  float: right;
  margin: 30px 5px 0px 5px;
}

.box {
  height: 300px;
  width: 500px;
  border-style: solid;
  border: 0px .5px 2px .5px;
  border-color: #C7C9C9;
  border-radius: 4px;
  padding: 0;
}

#Box1 {
  float:right;
  background-color: #FFFFFF;
  margin: 15px 25px 15px 12.5px;
}

#Box1 .header1 {
  height: 60px;
  width: inherit;
  padding: 0;
  margin: 0px 0px 240px 0px;
  background-color: #FF81AD;
}

#Box2 {
  float:left;
  background-color: #FFFFFF;
  margin: 15px 12.5px 15px 25px;
}

#Box2 .header2 {
  height: 60px;
  width: inherit;
  padding: 0;
  margin: 0px 0px 240px 0px;
  background-color: #009E77;
}


#Box3 {
  float:right;
  background-color: #FFFFFF;
  margin: 15px 25px 15px 12.5px;
}

#Box3 .header3 {
  height: 60px;
  width: inherit;
  padding: 0;
  margin: 0px 0px 240px 0px;
  background-color: #009E77;
}

#Box4 {
  float:left;
  background-color: #FFFFFF;
  margin: 15px 12.5px 15px 25px;
}

#Box4 .header4 {
  height: 60px;
  width: inherit;
  padding: 0;
  margin: 0px 0px 240px 0px;
  background-color: #8685CB;
}

.box .time {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #FFFFFF;
  float: right;
  margin-right: 30px;
  margin-top: 22px;
}

button {
    background-color: #C7C9C9;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    display: inline;
    font-size: 12px;
  }

.box .btn {
  height: 35px;
  width: 100px;
  margin: 0px 0px 100px 140px;
}

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

这是因为你有大量的保证金。减少它，按钮将显示在div中。

当前margin: 0 0 240px; 将其更改为margin: 0 0 200px;。

对于相同的 css，不要使用不同的类，为所有四个 div 创建一个通用类。

喜欢，在给定的小提琴中。

.hdiv{
  height: 60px;
  width: inherit;
  padding: 0;
  margin: 0px 0px 200px 0px;
}

Working Fiddle

【讨论】：