[英]In a 'div' element, how to align text to the left while aligning all other items to the right?
It's like a post where the title appears on the left and the dropdown settings menu's arrow on the right.. This is what I have till now 这就像一个帖子,标题显示在左侧,下拉设置菜单的箭头显示在右侧。
<style>
.thread {
background-color: skyblue;
height: 50px;
width: 90%;
align-self: center;
text-align: end;
display: inline-block;
border-radius: 6px;
position: relative;
}
.header {
width: fit-content;
display: inline-block;
align-self: right;
}
.arrow {
display: inline-block;
vertical-align: bottom;
height: 50%;
}
.titletext {
display: inline-block;
text-align: left;
}
</style>
<div class="thread">
<p class="titletext">Title</p>
<div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>
And I'm trying to achieve this 我正在努力实现这一目标
Sorry if the code is too random or if some lines are unneeded but I've been searching and trying many stuff so that's what I have right now. 抱歉,如果代码太随机,或者不需要某些行,但是我一直在搜索并尝试很多东西,所以这就是我现在所拥有的。
You can use float:right
on the arrow, and text-align:left
on the entire header. 您可以在箭头上使用
float:right
,在整个标题上使用text-align:left
。
.thread { background-color: skyblue; height: 50px; width: 90%; text-align: left; display: inline-block; border-radius: 6px; position: relative; } .header { display: inline-block; float: right; } .arrow { display: inline-block; vertical-align: bottom; width: 25px; height: auto; float: right; margin: 12px; } .titletext { display: inline-block; text-align: left; }
<div class="thread"> <p class="titletext">Title</p> <img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /> </div>
.titletext {
display: inline-block;
float: left;
}
just use float:left;
只需使用
float:left;
.thread { background-color: skyblue; height: 50px; width: 90%; align-self: center; text-align: end; display: inline-block; border-radius: 6px; position: relative; } .header { width: fit-content; display: inline-block; align-self: right; padding:15px 10px; } .arrow { display: inline-block; vertical-align: bottom; height: 50%; } .titletext { display: inline-block; text-align: left; float:left; padding-left:10px; }
<div class="thread"> <p class="titletext">Title</p> <div class="header"><img class="arrow" width="20" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div> </div>
Just put you´r class="titletext"
like: 只需将您的
class="titletext"
放入:
.titletext {
position: absolute;
top;
left: 0;
}
You can use float:left on the titletext 您可以在标题文本上使用float:left
<style>
.thread {
background-color: skyblue;
height: 50px;
width: 90%;
align-self: center;
text-align: end;
display: inline-block;
border-radius: 6px;
position: relative;
}
.header {
width: fit-content;
display: inline-block;
align-self: right;
}
.arrow {
display: inline-block;
vertical-align: bottom;
height: 50%;
}
.titletext {
display: inline-block;
float:left;
}
</style>
<div class="thread">
<p class="titletext">Title</p>
<div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.