4

我想要实现的是类似于THIS的东西，也就是说，有 3 个按钮，一个在左侧，一个在中心，一个在右侧，并且在同一“行”中，但是使用 css 和 div，因为我知道使用表格来布置页面是错误的。

我想我需要使用浮点数，并且我已经实现了正确的左右 div，但是我不能让中心 div 居中，它只是跳出了其他两个的线。

我的尝试：

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??*/
}

这是一个小提琴，搞砸了。

我怎样才能实现它，并获得最接近表格布局示例？

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

4

3 回答 3

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

演示

编辑以回应评论

如果要包含边框，则需要相应地更新宽度。CSS 使用盒子模型，其中总宽度为边距 + 边框 + 填充 + 内容（由 width 属性控制）。这是一个为每个添加 1px 边框并相应更新宽度的演示。div

于 2013-06-05T23:33:53.180 回答
1

这样就可以解决问题（第 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.

如果标签是提前知道的，边距值很容易计算出来。

但是，要做到这一点，三个标签的长度必须小于线的长度，否则，居中是不可能的。

请查看更新的演示。

小提琴演示

于 2013-06-05T23:34:02.313 回答
0

看看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>
于 2013-06-05T23:52:24.567 回答