我對 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 關注
- 106 瀏覽
添加回答
舉報
0/150
提交
取消