user3821206 user3821206 - 4 months ago 7
HTML Question

stretch the boxes to have an organized menu with CSS

I have a menu and I want to stretch the boxes in this menu to have an organized one

I tried like this,this is my code:

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


and this is the CSS code:

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


what I get is a non organized menu,so how can modify my CSS
thanks for help

Answer

I'm suggesting adding to your existing <a> tags class .btn-block. Also remove .pull-right and set text-align: right to your .btn-action declaration or add class .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>

Comments