我对 HTML 完全陌生，我想相对于其容器定位项目并调整其大小。我复制了这段代码（https://codepen.io/Tectonics0x3F/pen/EfAgr），如果我将顶部和左侧的百分比更改为 25% 和 25%，则盒子位于容器顶部下方 25%，如果我更改高度和宽度，则在与盒子大小相同的正确方向上多出 25%，盒子的高为容器高度的 25%，宽度为容器长度的 25%。但如果我在代码中这样做，盒子和容器就会去任何地方。我认为问题在于盒子并不是真正在容器中，但我不知道该怎么做。如果您需要知道这一点，我不知道，但我想做的是在容器中包含这些框的菜单。预先感谢您的帮助，并对我的英语不好表示歉意。我的代码 body{ background-image:url('../images/bg24.jpg'); color: #fff; font-family: Arial, Helvetica, sans-serif; font-size:16px; line-height: 1.6em; margin:0; background-repeat:repeat; margin: auto;}#container { height:70%; width:90%; margin:auto; top:25%; left:5%; border: 5px solid white; position:relative;}.button { background-color: #474B4F; border: 2px solid Black; color: white; padding: 5% 5%; text-align: center; text-decoration: none; display: inline; font-size: 20px; cursor: pointer; border-radius: 5px; box-sizing: border-box;}#button1{ top: 0; left: 0; position:absolute;}#button2{ margin-top:0; margin-left: 25%; position: absolute;}<body> <div id="container"> <div id="button1"> <a href="Somepage.html" class="button">clickme1</a> <div id="button2"> <a href="Somepage2.html" class="button">clickme2</a> </div> </div></body>
1 回答
宝慕林4294392
TA贡献2021条经验 获得超8个赞
这是实现菜单的最简单方法，如果您想要对此进行更详细的演练回复。
.button {
background-color: #474B4F;
border: 2px solid Black;
color: white;
padding: 5% 5%;
text-align: center;
text-decoration: none;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
#button1,#button2 {
margin:12px;/* If you want spacing between them */
display:inline-block;
}
<body>
<div id="container">
<div id="button1">
<a href="Somepage.html" class="button">clickme1</a>
</div>
<div id="button2">
<a href="Somepage2.html" class="button">clickme2</a>
</div>
</div>
</body>
- 1 回答
- 0 关注
- 77 浏览
添加回答
举报
0/150
提交
取消