html - 在我的其他按钮旁边添加一个下拉按钮

Question

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

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 友好的方式。

Answer 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

Answer 2

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

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

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