Question

我正在尝试将我的商品列表与网页右侧对齐。另外，我想在左侧和中央数据结构（层次结构）和右侧列表之间有一个垂直的细分隔符。

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

现在，它刚刚出现在我的层次结构下面。我该怎么做才能解决此问题？

Answer 1

我始终喜欢使用canvasFileSync，这是一种使用容器内所有可用空间的简单方法。这就是我的方法：

-----（已编辑）-----

.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;来达到相同的结果。

HTML项目未使用CSS定位在右侧

1 个答案: