Стилизация элементов вправо, а затем центрирование - PullRequest
Новая
       12

Стилизация элементов вправо, а затем центрирование

0 голосов
/ 09 июня 2018

Я создал простой список и хочу нажать значок проверки для завершенных элементов и кнопку «Добавить бенефициара» для незавершенных элементов справа.Я добился этого с помощью margin-left: auto;но думаю, что будет лучше, если их подтолкнуть вправо, а затем сосредоточить между собой.Есть ли простой способ сделать это?Прямо сейчас мой список выглядит так:

enter image description here

Я бы хотел, чтобы кнопка и значок проверки были справа, но центрированы между собой.Мой HTML выглядит так: 

<div class="flex">
        <div>
          <a class="flex collapsed" ng-class="{'accordion-toggle collapsed':item.beneficiaries.length>0}" ng-if="item.beneficiaries.length>0" data-toggle="collapse" href="#{{item.benefit_type_sysID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
            <span class="h4" >{{item.benefit_type_name}}</span>
          </a>
          <h1 class="h4 flex collapsed" ng-if="item.beneficiaries.length==0">
            {{item.benefit_type_name}}
          </h1>
        </div>
        <div style="margin-left:auto;">
          <button title="Add a beneficiary" type="button" class="btn btn-primary text-uppercase" ng-if="item.beneficiaries.length==0" ng-click="c.newEntry(-1, 'sn_hr_core_beneficiary','newBene')">Add Beneficiary</button>
          <i title="Beneficiaries total 100%" class="fa-2x fa fa-check-circle success" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total==100"></i>    
          <i title="Beneficiaries do NOT total 100%" class="fa-2x fa fa-exclamation-circle warning" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total!=100"></i>
        </div>
      </div>

Есть ли эффективный способ стилизовать это?Спасибо!

1 Ответ

0 голосов
/ 09 июня 2018

Это то, что вам нужно сделать, чтобы сделать его центром.Вам нужно добавить определенную ширину в div.Попробуйте это. 

<div class="action">
  <button title="Add a beneficiary" type="button" class="btn btn-primary text-uppercase" ng-if="item.beneficiaries.length==0" ng-click="c.newEntry(-1, 'sn_hr_core_beneficiary','newBene')">Add Beneficiary</button>
  <i title="Beneficiaries total 100%" class="fa-2x fa fa-check-circle success" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total==100"></i>
  <i title="Beneficiaries do NOT total 100%" class="fa-2x fa fa-exclamation-circle warning" aria-hidden="true" ng-if="item.beneficiaries.length>0 && item.percent_total!=100"></i>
</div>

CSS, 

.action {
  margin-left: auto;
  width: 140px;
  text-align: center;
}
...