3

私は Twitter Bootstrap 環境で使用していますが、率直な回答もLESS受け入れます。CSS

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

別の幅:

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

6 に答える 6

4

これが一番簡単な方法かもしれないと思います...

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/

于 2013-07-23T15:08:47.147 に答える
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;
}
于 2013-07-23T14:58:43.407 に答える
1

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;
}
于 2013-07-23T15:03:19.867 に答える
1

私はそれを次のように動作させました：

<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>
于 2013-07-23T14:59:20.123 に答える
1

それがまさにあなたが望むものかどうかはわかりませんが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;}

フィドル

于 2013-07-23T14:51:12.880 に答える