CSS putting an item on the right side of a grid

تبليغ
سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ
‎إلغاء

I would like to put the button(containing 14) on the right end of the division.
I tried justify content end
But it’s not working.
I set the background color to gray, so it’s easier to see.
My code is below.
Thanks in advance.

<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Exercise 12a</title>
<style>
.line-div {
display: grid;
grid-template-columns: 300px 80px;
align-items: center;
width: 300px;
vertical-align: middle;
}
.left-div{
font-family: arial;
font-size: 19px;
margin-left:15px;
background-color: gray;
}
.description{
margin-top: 0;
margin-bottom: 0;
}
.right-div{
background-color: gray;
vertical-align: middle;
justify-items: end;
}
.number{
background-color: rgb(0, 89, 255);
border-style: none;
font-family: Arial;
font-size: 18px;
color: white;
padding-left: 13px;
padding-right: 13px;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 13px;
}
</style>
</head>
<body>
<div class=”line-div”>
<div class=”left-div”><p class=”description”>Home</p></div>
<div class=”right-div”>
<button class=”number”>14</button>
</div>
</body>
</html>

0
X 5 أشهر 2022-07-10T12:04:08+03:00 0 إجابة 1 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب