Question

我希望实现的是类似THIS的东西，即有3个按钮，一个在左边，一个在中间，一个在右边，在同一个“线”，但是使用css和div，因为我知道使用表来布局页面是错误的。

我想我需要使用浮点数，而且我已经实现了正确的左右div，但是我不能让中心div成为，中心，它只是跳出另一个的线2。

我的尝试：

HTML：

<div class="left" ><input type="button" value="left" /></div>
<!--<div class="center" ><input type="button" value="center" /></div>-->
<div class="right" ><input type="button" value="right" /></div>

<!-- If I uncomment the center div, the right one appears in another block, below the others-->

的CSS：

.left {
    float:left;
}
.right {
    float:right;
}
.center{
    /*what do i put here??*/
}

here is a fiddle，为了搞砸了。

如何实现它，并获得最接近表格布局的示例？

注意：我查了其他类似的问题，但找不到一个完全相同的问题。

Answer 1

这个怎么样：

.left {
    float:left;
    width: 33.3%
}
.right {
    float:right;
    width: 33.3%;
    text-align: right;
}
.center{
    float: left;
    width: 33.3%;
    text-align: center;
}

DEMO

编辑以回复评论

如果要包含边框，则需要相应地更新宽度。 CSS使用box model，其中总宽度为margin + border + padding + content（由width属性控制）。这是一个DEMO，为每个div添加1px边框，并相应地更新宽度。

Answer 2

这将解决问题（第二次修订）。

在两个浮动元素之后移动.center div：

<div class="left">
    <input type="button" value="left" />
</div>
<div class="right">
    <input type="button" value="right" />
</div>
<div class="center">
    <input type="button" value="center" />
</div>

对于CSS，您只需使用text-align: center将输入按钮居中，因为它是内联元素。

.left {
    float:left;
}
.right {
    float:right;
}
.center {
    text-align: center;
    outline: 1px dotted blue; /* to show content box limits */
    margin: 0 150px;
}

如何运作

浮动元素定位到父容器的左边缘或右边缘，其顶边与父容器的顶部相邻，或者在浮动元素之前与最近的块元素的底边相邻。

如果希望左右浮动元素出现在同一水平线上，则它们需要彼此相邻，这就是左右浮动后出现.center元素的原因。

来自.center元素的内容（在本例中为输入按钮）包裹左右浮动元素，这意味着内联框的长度（包含内容的虚构框）是缩短为浮动元素腾出空间，这意味着内容行从左元素的右边缘延伸到右元素的左边缘。当您使用text-align: center时，输入按钮位于此缩短的内联框的中心，这就是如果左右按钮的长度不同，则元素显示在偏离中心的原因。

要解决这个问题，你需要为花车留出一些空间。一种简单的方法是设置相等的左右边距，例如margin: 0 150px。

如果提前知道标签，则边际值很容易弄明白。

但是，要使其工作，三个标签的长度必须小于线的长度，否则，居中是不可能的。

请参阅更新的演示。

Fiddle Demo

Answer 3

查看http://oocss.org/grids_docs.html

我用它来做一切。这非常容易和可扩展。

短期回答：

.unit {
    float: left;
}
.last-unit {
    float: none;
    display: table-cell;
    width: auto;
}
.size1of3 {
    width: width:33.33333%;
}
.pull-content-right {
    text-align: right;
}
.pull-content-left {
    text-align: left;
}
.center-content {
    text-align: center;
}

<div class="line">
    <div class="unit size1of3 pull-content-left">
    </div>
    <div class="unit size1of3 center-content">
    </div>
    <div class="unit size1of3 last-unit pull-content-right">
    </div>
</div>

如何在另外两个（左和右）div之间居中？

3 个答案: