我如何将此 H1 元素定位在右上角
[英]How Do i position this H1 element in the top right
问题描述
I Want to make it so the 100 appears in the top left corner of my div, I have it aligned to the left but it still appears on the bottom.
我想让 100 出现在我的 div 的左上角，我让它与左边对齐，但它仍然出现在底部。 Is there an easy way for me to fix it in CSS?有没有一种简单的方法可以在 CSS 中修复它？ I want it to look like the The character select cards in destiny 2我希望它看起来像命运 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
Try尝试
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
解决方案2
1 已采纳 2022-07-18 21:56:41
The code is not clean (from a CSS perspective), however I would suggest doing display:flex;代码不干净（从 CSS 的角度来看），但是我建议做display:flex; , justify-content:space-between; ， justify-content:space-between; and align-items:center;和align-items:center; on titan div, then add the first 2 heading in a div.在 Titan div 上，然后在 div 中添加前 2 个标题。
Further improvements I would do is to get rid of padding from Headings.我要做的进一步改进是摆脱标题中的填充。 This is bad practice.这是不好的做法。 You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.您应该在 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
If i understand correctly the solution is very simple;如果我理解正确，解决方案非常简单； for h1 element对于 h1 元素
position: fixed;
top: 0;
right:0;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.