stretch the boxes to have an organized menu with CSS - html

Question

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 1

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>

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

Answer 3

Since you're using Bootstrap I have another suggestion. Remove the list entirely and add .btn-block to your anchors since Bootstrap can handle anchors as full-width, block-style buttons already.
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);
}