代码之家 › 专栏 › 技术社区 › Dave

右侧的造型元素,然后居中

flexbox twitter-bootstrap css html

Dave · 技术社区 · 6 年前

我已经创建了一个简单的列表,并希望按下一个已完成项目的复选图标和一个“添加受益人”按钮,将未完成项目添加到右侧。我已经通过使用左边距:auto实现了这一点,但我认为如果把它们推到右边,然后集中在它们之间,效果会更好。有什么简单的方法可以让我做到这一点吗?现在我的列表如下:

我希望按钮和检查图标在右边,但在它们之间居中。我的HTML如下所示:

<div class=“flex”>
<DIV>
<a class=“flex-collapsed”ng class=“”accordion-toggle-collapsed”:item.beneficiators.length>0”ng if=“item.beneficiators.length>0”data toggle=“collapse”href=“item.benefits_type”role=“button”aria expanded=“false”aria controls=“collapseDetails”>
<span class=“h4”>项目。利益类型</span>
</a>
<h1 class=“h4 flex followed”ng if=“item.benefiers.length==0”>
项目.效益类型名称
</h1>
</DIV>
<div style=“margin-left:auto;”>
<button title=“添加受益人”type=“button”class=“btn btn primary text uppercase”ng if=“item.benefiers.length==0”ng click=“c.newentry(-1,'sn_-hr_-core_-beneficiary','newbene')”>添加受益人</button>
<i title=“受益人合计100%”class=“FA-2X FA支票圈成功”aria hidden=“true”ng if=“item.beneficiators.length>0&&item.percent”total==100”></i>
<i title=“受益人不合计100%”class=“FA-2X FA感叹号圆圈警告”aria hidden=“true”ng if=“item.beneficiators.length>0&&item.percent”合计!=100“></i>
</DIV>
</DIV>
有没有一种有效的方式来设计这种样式?谢谢!



我希望按钮和检查图标在右边,但在它们之间居中。我的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 回复 | 直到 6 年前

Aryan Twanju 6 年前

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

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