我有一个菜单,我想拉伸此菜单中的框以使其有条理的
我试过这样,这是我的代码:
<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 谢谢你的帮助
答案 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
。
<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;
答案 2 :(得分:2)
由于您使用的是Bootstrap,我还有其他建议。完全删除列表并将.btn-block
添加到您的锚点,因为Bootstrap已经可以将锚点作为全宽块块样式按钮来处理。
<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);
}