html - 拉伸(stretch)框以使用 CSS 组织菜单

Question

我有一个菜单，我想拉伸(stretch)这个菜单中的框，使菜单井井有条

我这样试过，这是我的代码:

 <div class="col-sm-1">
                <ul class="nav-gproS">
                    <li>
                <a style="margin-top: 10px" class="btn btn-action pull-right" 
                        href="" ng-click="go1()">F.Suiveuse</a>
                    </li>
                    <li class="active">
                <a style="margin-top: 10px" class="btn btn-action pull-right"
                        href="" ng-click="go2()">Suivi/Poste</a>
                    </li>
                    <li>
                <a style="margin-top: 10px" class="btn btn-action pull-right" 
                        href="" ng-click="go3()">Personnel</a>
                    </li>
                    <li>
                <a style="margin-top: 10px" class="btn btn-action pull-right" 
                        href="" ng-click="go4()">Avct OF</a>
                    </li>
                </ul>
            </div>

这是CSS代码:

 .nav-gproS {
        list-style-type: none;
    }
    .btn-action {
        background: #1f8597;
        color: #fff;
        border-radius: 0px;
        font-weight: 600;
    }
    .btn {
        font-family: 'Open Sans', 'Segoe UI', 'Droid Sans', Tahoma, Arial, sans-serif;
        border-width: 0px;
        -webkit-box-shadow: inset 0 0px 0px 0px rgba(0,0,0,0.07);
        box-shadow: inset 0 0px 0px 0px rgba(0,0,0,0.07);
    }
    .pull-right {
        float: right !important;
    }

我得到的是一个没有组织的菜单，所以如何修改我的 CSS谢谢帮助

Answer 1

我建议添加到您现有的 <a>标签类 .btn-block .同时删除 .pull-right并设置 text-align: right给你的.btn-action声明或添加类 .text-right .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .nav-gproS {
    list-style-type: none;
  }
  .btn-action {
    background: #1f8597;
    color: #fff;
    border-radius: 0px;
    text-align: right;
    /* text right added here*/
    font-weight: 600;
  }
  .btn {
    font-family: 'Open Sans', 'Segoe UI', 'Droid Sans', Tahoma, Arial, sans-serif;
    border-width: 0px;
    -webkit-box-shadow: inset 0 0px 0px 0px rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 0px 0px 0px rgba(0, 0, 0, 0.07);
  }
  .pull-right {
    float: right !important;
  }
</style>
<div class="col-sm-3">
  <ul class="nav-gproS">
    <li>
      <a style="margin-top: 10px" class="btn btn-action btn-block" href="" ng-click="go1()">F.Suiveuse</a>
    </li>
    <li class="active">
      <a style="margin-top: 10px" class="btn btn-action  btn-block" href="" ng-click="go2()">Suivi/Poste</a>
    </li>
    <li>
      <a style="margin-top: 10px" class="btn btn-action  btn-block" href="" ng-click="go3()">Personnel</a>
    </li>
    <li>
      <a style="margin-top: 10px" class="btn btn-action  btn-block" href="" ng-click="go4()">Avct OF</a>
    </li>
  </ul>
</div>