拉伸框以使用CSS组织菜单

时间:2016-06-28 13:38:56

标签: html css css3

我有一个菜单,我想拉伸此菜单中的框以使其有条理的

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

 <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 谢谢你的帮助

3 个答案:

答案 0 :(得分:2)

.nav-gproS {
    list-style-type: none;
}

.nav-gproS a {              /*Set a width on your links, so they get the same width*/
  width: 150px;
  text-align: right;
}

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

答案 1 :(得分:2)

我建议您添加现有的<a>代码类.btn-block。同时删除.pull-right并将text-align: right设置为.btn-action声明或添加课程.text-right

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:2)

由于您使用的是Bootstrap,我还有其他建议。完全删除列表并将.btn-block添加到您的锚点,因为Bootstrap已经可以将锚点作为全宽块块样式按钮来处理。

Check This Out

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


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