我如何將此 H1 元素定位在右上角
[英]How Do i position this H1 element in the top right
問題描述
我想讓 100 出現在我的 div 的左上角，我讓它與左邊對齊，但它仍然出現在底部。 有沒有一種簡單的方法可以在 CSS 中修復它？ 我希望它看起來像命運 2 中的角色選擇卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
3 個解決方案
解決方案1
1 2022-07-18 21:53:48
嘗試
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
解決方案2
1 已采納 2022-07-18 21:56:41
代碼不干凈（從 CSS 的角度來看），但是我建議做display:flex; ， justify-content:space-between; 和align-items:center; 在 Titan div 上，然后在 div 中添加前 2 個標題。
我要做的進一步改進是擺脫標題中的填充。 這是不好的做法。 您應該在 div 中以您想要的方式放置標題，而不是直接在 Headings 上應用填充，除非您 100% 確定所有標題將在全球范圍內遵循此模式。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300'); body { background-image: url(../assets/bg.PNG); background-repeat: no-repeat; background-size: cover; } .titan { background-image: url('../assets/titan.PNG'); width: 474px; height: 96px; display: flex; justify-content:space-between; align-items: center; } h1 { color: #31ccf3; font-family: 'Roboto', sans-serif; padding-left: 5rem; float: right; } h2 { color: white; font-family: 'Roboto', sans-serif; padding-left: 5rem; } h3 { color: #c9c9c9; font-family: 'Roboto', sans-serif; padding-left: 5rem; font-size: 1em; }
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>D2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../styles/styles.css"> </head> <body> <div class="titan"> <div> <h2>Titan</h2> <h3>Exo Male</h3> </div> <h1>100</h1> </div> <script src="../js/index.js" async defer></script> </body> </html>
解決方案3
0 2022-07-18 22:03:36
如果我理解正確，解決方案非常簡單； 對於 h1 元素
position: fixed;
top: 0;
right:0;
在偽元素之前使用時，如何“移動” h1標簽的位置？
[英]How do I “shift” the position of h1 tag when using before pseudo element?
我如何保持我的<h1> header 留在我的頂部</h1><h2> header？</h2>
[英]How do I keep my <h1> header to remain on top of my <h2> header?
我怎么能得到這個 <h1> 元素顯示在表格下方而不是右側？
[英]How can I get this <h1> element to appear under the tables instead of to the right of it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.