将浮动按钮置于两个浮动按钮之间（液体尺寸）

Question

我在将浮动按钮置于另外两个浮动按钮之间时遇到问题。

到目前为止看起来像这样：

此时 CSS 非常基本：

A {
  float: left;
}
B {
  float: left;
}
C {
  float: right;
}

注意：按钮 A 位于页面的最左边，按钮 C 位于最右边。 B 应该在中间（无论如何，这就是想法）。

我知道浮动没有“中心”值。我已经阅读了这个问题的一些其他解决方案。但其中大多数都涉及在包装器 div 中设置特定宽度，在我看来，这对于液体布局设计来说不是一个理想的解决方案。如果您必须包裹按钮，我不确定这比使用直接定位更好。

无论哪种方式，我都在寻找使用液体布局方法的解决方案。

我也尝试了以下方法，但没有成功。

B {
  position: relative;
  left: 0;
  right: 0;
}

任何帮助将不胜感激。非常感谢。

Answer 1

如果将 text-align: center; 放在它们的容器上并且根本不浮动 B 怎么样？

（我假设它是一个内联元素，如果不是，也在 B 上执行 display: inline-block; ）

Answer 2

我的解决方案：

http://jsfiddle.net/UWNTM/1/

希望有帮助。

基本上，我对元素使用了三个包装器：

.button_wrapper {
    float: left;
    width: 33%;
}

然后使用内联 text-align 属性将按钮放置在其中。

Answer 3

尝试这个 HTML 代码：

<div class="left">1</div>
<div class="right">3</div>
<div class="center">2</div>

使用这个 CSS 代码：

.left { float: left; }
.right {float: right; }
.center { margin-left: 50%; }

Answer 4

您可以使用 display:table-cell 来实现此目的。尽管我认为其他答案可能更好，但有替代解决方案还是很好的。

http://jsfiddle.net/bES7Q/

<div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
</div>

div { width: 100%; display: table; }
span {
    border: 1px solid gray;
    display: table-cell;
    width: 1%;
}
span:nth-of-type(2) {
    width: 99%;
    text-align: center;
}

Answer 5

我用博客导航按钮做到了这一点。我之前使用过xec的解决方案。这是我现在使用的技巧的一个变体：

.button1, .button2, .button3
{
    width: 60px;
    height: 20px;
}
.button1
{
    /* float implies block display */
    float: left;
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+1);
}
.button2
{
    /* set block display to make width, height and auto margin work */
    display: block;
    margin: 0 auto;
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+2);
}
.button3
{
    /* float implies block display */
    float: right;
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+3);
}

演示

Answer 6

    .btn-group{
    	margin-top:2%;
    	display: flex;
        justify-content: center;
    }

    			<div class="btn-group" role="group" aria-label="Basic example">
    			  <button type="button" class="btn btn-secondary">History</button>
    			  <button type="button" class="btn btn-secondary">Expertise</button>
    			  <button type="button" class="btn btn-secondary">Differentiators</button>
    			  <button type="button" class="btn btn-secondary">Values</button>
    			</div>

使用CSS属性而不是使用margin、padding上面的代码也适合所有的按钮对齐