在'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; 
}