如何在流体宽度容器的左侧、中间和右侧的同一行中放置三个按钮？答案

【问题标题】：How can I place three buttons in the same row at the left, middle and right in a fluid-width container?如何在流体宽度容器的左侧、中间和右侧的同一行中放置三个按钮？
【发布时间】：2013-07-23 23:14:14
【问题描述】：

我在 Twitter Bootstrap 环境中使用 LESS，但我也会直接接受 CSS 的答案。

| Fluid-width container                            |
|                                                  |
| [Btn1]               [Btn2]               [Btn3] |
|                                                  |

另一个宽度：

| Fluid-width container                |
|                                      |
| [Btn1]         [Btn2]         [Btn3] |
|                                      |

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

在我看来，您可以使用这样的股票引导环境来做到这一点：

<div class="row-fluid">
  <div class="span4 text-left"><a href="#" class="btn">Btn1</a></div>
  <div class="span4 text-center"><a href="#" class="btn">Btn2</a></div>
  <div class="span4 text-right"><a href="#" class="btn">Btn3</a></div>
</div>

这使得三个<div> 的span4 列组成了用于引导程序的十二列网格。

您不需要添加任何额外的 CSS，因为这些 .text-left、right 和 center 类随 bootstrap 一起提供。

【讨论】：

我不知道text-left、text-center、text-right。谢谢！为什么锚点而不是按钮？为什么text-left 在锚点而不是包装div？
我做了 .text-left 只是为了表明它是可用的......它适用于<button> 和其他内联元素。您对 <a> 而不是父元素上应用的类缺失是正确的。所以我只是编辑了我的回复。

【解决方案2】：

我认为这可能是最简单的方法...

HTML

注意嵌套元素是inline元素

<div>
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
</div>

CSS

div
{
    border: 1px solid lime;
    text-align: center;
}

span
{
    background-color: #ff8;
}

span:first-child
{
    background-color: #f8f;
    float: left;
}

span:last-child
{
    background-color: #8ff;
    float: right;
}

JSFiddle

http://jsfiddle.net/TUwek/

【讨论】：

【解决方案3】：

http://jsfiddle.net/GNPpX/1/

你可以使用浮点数来做到这一点

<div class='container'>
    <button id="btn1">one</button>
    <button id="btn2">two</button>
    <button id="btn3">three</button>
</div>


.container{
    width: 100%;
    float: left;
    border: solid 1px blue;
    text-align: center;
}
.container button{
    display: inline-block;
}
#btn1{
    float:left;
}
#btn3{
    float:right;
}

【讨论】：

【解决方案4】：

我不知道这是否正是你想要的，但是在父级上使用 display: table; 并在子级上使用 display: table-cell 会给你这样的渲染：

HTML：

<ul>
    <li class="left"><button>BTN1</button></li>
    <li><button>BTN2</button></li>
    <li class="right"><button>BTN3</button></li>
</ul>

CSS：

ul {
    display: table;
    width: 60%;
}
li {
    display: table-cell;
}
li.left {text-align: left;}
li.right {text-align: right;}

The Fiddle

【讨论】：

【解决方案5】：

我让它与以下内容一起工作：

<style>
    .center { text-align: center; }
    .right { text-align: right; }
</style>

<div class="row-fluid">
    <div class="span4"><button>One</button></div>
    <div class="span4 center"><button>Two</button></div>
    <div class="span4 right"><button>Three</button></div>
</div>

【讨论】：

【解决方案6】：

http://jsfiddle.net/feitla/yvXdc/1/

给你：

<div class="container">
    <div class="container-fluid full-width">
        <div class="row-fluid">
            <button class="btn pull-left">button 1</button>
            <button class="btn">button 2</button>
            <button class="btn pull-right">button 3</button>
        </div>
    </div>
</div>

.container {
   text-align:center;
} 
 button {
     display:inline-block;
}

【讨论】：