此问题是由于ButtonGroup中的CSS样式导致的。可以通过自定义CSS样式来解决。如下所示:
HTML代码:
样式代码:
/* 样式重置 */
.button-group {
overflow: hidden;
display: inline-block;
}
.button-group .button {
float: left;
border-right: 0;
margin-right: -1px;
}
.button-group .button:last-child {
border-right: 1px solid #ccc;
}
.button-group .button.active {
background: #ccc;
}
/* 自定义样式 */
.button-group a {
text-decoration: none; /* 去掉链接下划线 */
display: inline-block;
padding: 10px 20px;
background: #f5f5f5;
border: 1px solid #ccc;
color: #333;
}
.button-group a:hover {
background: #e6e6e6;
}
.button-group .button.active {
background: #ccc;
color: #fff;
}
在这个例子中,我们自定义了CSS样式,将按钮的右边框设为0,并在最后一个按钮上添加了1px的实线边框。这样,无论链接的href属性是什么,都不会影响右边框的样式。