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

Question

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

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

另一个宽度：

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

Answer 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>构成 12 列网格的 3 个 span4 列用于引导程序。

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

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

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

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

小提琴

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

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