1

我正在尝试创建一个按钮工具栏，如下所示：

/------+--------+-------\
| left | middle | right |
\------+--------+-------/

在这个小提琴中我所要做的就是消除按钮之间的边距。但是如何在不使用负边距的情况下做到这一点呢？这是可能的，还是存在更好的方法来创建工具栏？

HTML：

<button class=left>left-button</button>
<button>middle-button</button>
<button class=right>right-button</button>

CSS：

button {
    border-radius: 0px;
    border: 1px solid green;
    margin: 0;
}
.left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
4

4 回答 4

2

删除按钮之间的空格，如下所示：

<button class=left>left-button</button><button>middle-button</button><button class=right>right-button</button>

.

button {
    border-radius: 0px;
    border: 1px solid green;
    margin: 0px;
}

http://jsfiddle.net/4ssd9/7/

于 2013-10-24T17:40:57.480 回答
1

在这里我做了必要的更改，请检查小提琴链接http://jsfiddle.net/Mohinder/vwK3Z/

你需要做的是让按钮float:left;从左按钮删除右边框，从右按钮删除左边框，就像我在小提琴上的方式一样。

如果你想要没有边界，那么添加class="mid"到中间按钮并添加.mid { border-left:none; border-right:none; }你的 CSS

于 2013-10-24T17:46:03.570 回答
1

只需添加float:left;

我还用容器把它包起来，这样它就会居中，如果你愿意，你可以把它们取下来。

查看更新的小提琴

希望有帮助。

于 2013-10-24T17:39:57.733 回答
1

您可以float:left;在按钮上使用。

button {
    border-radius: 0px;
    border: 1px solid green;
    margin: 0;
    float:left;      /* Add this */
}

演示

于 2013-10-24T17:40:08.927 回答