格式化＆＃34;电话＆＃34;不工作

Question

我目前正在开发使用html / css / javascript的第一个chrome扩展程序。我有一个问题，到目前为止，stackoverflow中的任何问题似乎都没有回答我的问题。

我有一个看起来像手机的布局，就像iPhone一样。基本上，homepage-bottom ID div中的我的按钮无法正常工作。我想要homepage-bottom-inside ID div（它的颜色为黑色）。

目前看起来像这样。

请解释我的错误，并修复代码。

＆＃13;

＆＃13;

#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 50px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

＆＃13;

<div id="homepage-bottom">
  <div id="homepage-bottom-content">
    <div id="homepage-bottom-content-inside"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

EXTRA

这就是整体＆＃34;手机＆＃34;外观。

＆＃13;

＆＃13;

#homepage {
  margin: auto;
  height: 620px;
  width: 330px;
  background-color: lightblue;
  border-radius: 40px;
  border: black 7px solid;
}
#homepage-content {
  margin: auto;
  height: 470px;
  cursor: cell;
  width: 270px;
  background-color: white;
  border-radius: 7.5px;
  border: 3px black solid;
}
#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 50px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

＆＃13;

<div id="homepage">
  <div id="homepage-top">
    <div id="homepage-top-content">
      <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
      <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
    </div>
  </div>
  <div id="homepage-content">
  </div>
  <div id="homepage-bottom">
    <div id="homepage-bottom-content">
      <div id="homepage-bottom-content-inside"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

padding-top是总高度的一部分，因此height:40px + padding-top:10px为homepage-bottom-content执行此操作。

请注意border厚度也是总高度的一部分。

＆＃13;

＆＃13;

#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 40px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

＆＃13;

<div id="homepage-bottom">
  <div id="homepage-bottom-content">
    <div id="homepage-bottom-content-inside"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

附加

您的手机已修好：

＆＃13;

＆＃13;

#homepage {
  margin: auto;
  height: 620px;
  width: 330px;
  background-color: lightblue;
  border-radius: 40px;
  border: black 7px solid;
}
#homepage-content {
  margin: auto;
  height: 470px;
  cursor: cell;
  width: 270px;
  background-color: white;
  border-radius: 7.5px;
  border: 3px black solid;
}
#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 40px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

＆＃13;

<div id="homepage">
  <div id="homepage-top">
    <div id="homepage-top-content">
      <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
      <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
    </div>
  </div>
  <div id="homepage-content">
  </div>
  <div id="homepage-bottom">
    <div id="homepage-bottom-content">
      <div id="homepage-bottom-content-inside"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;