如何相对于其容器调整项目的大小和位置
我对 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
这是实现菜单的最简单方法，如果您想要对此进行更详细的演练回复。.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>
随时随地看视频慕课网APP
相关分类
Html5