Question

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

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

我在fiddle所要做的就是消除按钮之间的边距。但是如何在不使用保证金的负值的情况下做到这一点？这是可能的，还是存在创建工具栏的更好方法？

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;
}

Answer 1

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

<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/

Answer 2

只需添加float:left;

我还用容器包裹它，这样它就会居中，你可以根据需要删除它们。

请参阅updated fiddle

希望有所帮助。

Answer 3

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

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

<强> DEMO

Answer 4

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

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

如果您不想使用边框，请将class="mid"添加到中间按钮，然后在CSS中添加.mid { border-left:none; border-right:none; }

从按钮元素创建按钮工具栏

4 个答案: