CSS 如何在流体宽度容器的左侧、中间和右侧的同一行中放置三个按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17813415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I place three buttons in the same row at the left, middle and right in a fluid-width container?
提问by Ryan
I'm using LESSin a Twitter Bootstrap environment, but I'd accept straight CSSanswers as well.
我LESS在 Twitter Bootstrap 环境中使用，但我也接受直接的CSS答案。
| Fluid-width container |
| |
| [Btn1] [Btn2] [Btn3] |
| |
Another width:
另一个宽度：
| Fluid-width container |
| |
| [Btn1] [Btn2] [Btn3] |
| |
回答by sulfureous
In my opinion you can do this with a stock bootstrap environment like this:
在我看来，您可以使用像这样的股票引导环境来做到这一点：
<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>
This makes three <div>'s that span4 columns that make up the twelve column grid for bootstrap.
这使得 3 个<div>跨越 4 列，构成用于引导程序的 12 列网格。
You don't need to add any extra CSS as those .text-left, right and center classes ship with bootstrap.
您不需要添加任何额外的 CSS，因为那些 .text-left、right 和 center 类随引导程序一起提供。
回答by gvee
I reckon this might be the simplest way...
我认为这可能是最简单的方法......
HTML
HTML
Note that the nested elements are inlineelements
请注意，嵌套元素是inline元素
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
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
JSFiddle
回答by Smeegs
You can do this using floats
你可以使用浮点数来做到这一点
<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;
}
回答by Ryan
I got it to work with the following:
我让它与以下一起工作：
<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>
回答by feitla
http://jsfiddle.net/feitla/yvXdc/1/
http://jsfiddle.net/feitla/yvXdc/1/
Here you go:
干得好：
<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;
}
回答by Brewal
I don't know if it is exactly what you want, but using display: table;on the parent and display: table-cellon the children gives you such a rendering :
我不知道这是否正是你想要的，但是display: table;在父级和子级display: table-cell上使用会给你这样的渲染：
HTML :
HTML :
<ul>
<li class="left"><button>BTN1</button></li>
<li><button>BTN2</button></li>
<li class="right"><button>BTN3</button></li>
</ul>
CSS :
CSS :
ul {
display: table;
width: 60%;
}
li {
display: table-cell;
}
li.left {text-align: left;}
li.right {text-align: right;}
