Question

我是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;
}

Answer 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

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

1 个答案: