我目前正在开发我的第一个使用 html/css/javascript 的 chrome 扩展。我有一个问题,到目前为止,stackoverflow 中的所有问题似乎都无法回答我的问题。
我有一个看起来像手机的布局,就像 iPhone 一样。基本上,我在 homepage-bottom
ID div
内的按钮无法正常工作。我想要 homepage-bottom-inside
ID div
(它的颜色是黑色)圆形。
目前看起来像这样。
请解释我的错误,并修复代码。
#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;
}
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
额外
这就是“手机”的整体外观。
#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;
}
<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>
最佳答案
padding-top
是总高度的一部分,所以 height:40px
+ padding-top:10px
为 主页底部内容
。
请注意,边框
厚度也是总高度的一部分。
#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;
}
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
额外
你的手机修好了:
#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;
}
<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>
关于html - "phone"的格式不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39308014/