在'div'元素中，如何將文本對齊到左側，而將所有其他項目對齊到右側？

Question

這就像在標題出現在左邊，並且下拉設置菜單的右側箭頭.. 後這是我到現在爲止

<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> 

It appears like this

And I'm trying to achieve this

對不起如果代碼過於隨機或者某些行不需要，但我一直在搜索並嘗試很多東西，所以這就是我現在所擁有的東西。

Answer 1

您可以在箭頭上使用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>

Answer 2

只使用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>

Answer 3

只要把找你class="titletext"，如：

.titletext { 
    position: absolute; 
    top; 
    left: 0; 
} 

Answer 4

您可以使用float：留在titletext

<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> 

Answer 5

.titletext { 
    display: inline-block; 
    float: left; 
}