使用CSS时，HTML项不会定位在右侧
使用CSS时，HTML项不会定位在右侧
提问于 2018-08-10 05:32:32
我正在尝试将我的项目列表与网页的右侧对齐。此外，我还希望在左侧和中心数据结构(层次结构)和右侧列表之间有一个垂直的细分隔符。
Right.component.html：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-divider">
<ul class="selection-list">
<li *ngFor="let item of getSelections()">
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button>
</li>
</ul>
</div>Right.component.css：
.selection-list {
list-style: none;
margin-top: 5px;
margin-bottom: 10px;
line-height: 15px;
font-size: 16px;
color: #555;
padding-left: 23px;
text-transform: capitalize;
right: 0;
}
.btn {
border: none;
padding: 0;
background: none;
}
.header-divider {
border-left:1px solid #38546d;
height:30px;
position:relative;
right:20px;
top:10px;
}现在，它就出现在我的层次结构下面。我应该怎么做才能解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-10 05:49:35
我总是喜欢使用flexbox，它是使用容器中所有可用空间的一种非常简单的方法。这就是我要做的：
-(编辑)
.flex-container {
display: flex;
height: 50px;
border: solid 1px peru;
}
.sendToRight {
margin-left: auto;
}<div class="flex-container">
<div class="PLCheck">
fortuneSelect
</div>
<div class="sendToRight"> <!-- add class to div for manipulation -->
rightSideComp
</div>
</div>
在本例中，margin-left:auto使您的.sendToRight div一直向右移动。您也可以在容器元素中使用justify-content: space-between;来实现相同的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51776059
复制相关文章
相似问题