在我的其他按钮旁边添加一个下拉按钮答案

【问题标题】：adding a drop down button alongside with my other buttons在我的其他按钮旁边添加一个下拉按钮
【发布时间】：2013-10-01 21:18:56
【问题描述】：

我在导航栏中有一些按钮：

http://jsfiddle.net/wKHaT/8/

<div class="mynav">
<ul class="nav nav-pills">
<li class=""><a href="192.168.1.100/aaa">AAA</a></li>
<li class=""><a href="192.168.1.100/aaa">BBB</a></li>
<li class=""><a href="192.168.1.100/aaa">CCC</a></li>
<li class=""><a href="192.168.1.100/aaa">DDD</a></li>
<li class=""><a href="192.168.1.100/aaa">EEE</a></li>
</ul>
</div>

<!-- Split button -->
<div class="btn-group mynav">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

我的按钮数量太多，所以我应该使用下拉按钮。这里有两个问题：

1- 我的下拉按钮的样式看起来不像其他按钮。有什么办法解决吗？（下拉按钮不应以更大的尺寸出现）

2- 另一个问题是我想通过单击我的按钮转到一个链接。我可以通过 onclick 做到这一点，但 onclick 不是 seo 友好的方式。

【问题讨论】：

如果您将ul 放在操作按钮内并将其设置为position: relative;，它将继承它们的样式以及相对于该按钮的大小。这是我为上一个问题制作的下拉列表，向您展示它是如何遵循其父级 li Link --> jsfiddle.net/Josh_Powell/XvQRH 的。也许你应该只为那个按钮做一个像this fiddle一样的CSS3下拉菜单，除非你希望它们都是lis

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

对于 #1，调整药丸上的样式以匹配按钮：

.nav-pills li a {padding: 7px 15px; font-weight: bold;}

反之亦然：

a.btn {padding: 4px 15px;}
button.dropdown-toggle {padding: 4px 8px;}

对于 #2，将您的按钮改为锚点：

<a href="#" class="btn btn-danger">Action</a>

http://jsfiddle.net/isherwood/wKHaT/14

http://jsfiddle.net/isherwood/wKHaT/15

【讨论】：

【解决方案2】：

1。试试这个适合你的风格：

[http://jsfiddle.net/wKHaT/10/][1]

2。 onclick 事件不会对您的 seo 进行负面评价

【讨论】：