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

我想要实现的是，有3个按钮，一个在左边，一个在中间，一个在右边，在同一条“线”中，但是使用css和div，因为我知道使用表格来布局页面是错误的

我想我需要使用浮动，我已经实现了正确的左右div，但是我不能让中心div，嗯，居中，它只是跳出另外两个线

我的尝试：

html:

那样的话，就麻烦了

如何实现它，并使其最接近表布局示例

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

这个问题如何：

.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

并相应地更新宽度的方法。

这将完成此操作（第二次修订）

将

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

这是如何工作的

浮动图元位于父容器的左边缘或右边缘，其顶边缘与父容器的顶部相邻，或位于浮动图元之前最近的块图元的底边缘

如果希望左浮动和右浮动元素显示在同一水平线上，则它们需要彼此相邻，这就是为什么

.center

元素显示在左浮动和右浮动之后

.center

元素（在本例中为输入按钮）中的内容环绕左右浮动元素，这意味着内联框（容纳内容的虚拟框）的长度缩短，以便为浮动元素腾出空间，这意味着内容行从left元素的右边缘延伸到right元素的左边缘。当您使用

文本对齐：居中时，输入按钮位于此缩短的内联框的中心，这就是为什么如果左右按钮的长度不同，元素会出现偏离中心的原因

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

如果提前知道标签，那么很容易计算出边距值

但是，要使其起作用，三个标签的长度必须小于线条的长度，否则无法对中

请看更新的演示

看一看

我什么都用这个。它非常简单且可扩展

短期答覆：

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

.unit{
浮动：左；
}
.最后一个单位{
浮动：无；
显示：表格单元格；
宽度：自动；
}
.尺寸1/3{
宽度：宽度：33.33333%；
}
.将内容向右拉{
文本对齐：右对齐；
}
.向左拉内容{
文本对齐：左对齐；
}
.中心内容{
文本对齐：居中；
}
在我将边框或边距添加到div（即使只有1px）之前，这一切都很正常，因为添加的像素使它们“不适合”在一行中，其宽度为33.3%。是否可以根据元素的边距和边框设置元素的宽度？我的意思是，总是有33.3%（三分之一），但不管元素的边距、边框和填充如何工作？请参阅我的最新答案。我原来的答案解决了你原来的问题。这个更新的答案提供了有关CSS如何控制元素宽度的附加信息，并显示了带有边框的演示版本。您需要考虑元素的宽度（请参阅有关框模型的链接），并调整CSS以满足您的需要。谢谢！我知道长方体模型，但我不知道您可以使用
calc（）
函数设置可变宽度（或其他尺寸）！如果不是手动计算
-2px
（基于1px边界的两侧），而是自动计算，那就更好了。但我想这是另一个问题。再次感谢，太好了！如果我已经回答了你的问题，请接受我的回答。如果你想有这样的变量，你应该学习。虽然我认为Marc Audet的答案更优雅、简单和直截了当，但我接受你的更有用，并考虑1/3个条件（虽然不是必要的，因为我只需要div左，中，右，不管它们的宽度）= p。我还刚刚了解到jQuery有.outerWidth（）方法，该方法返回元素的“真实”宽度，考虑到填充、边框和边距。谢谢，我会看得少一些。我看到的问题是，右边div的文本没有按照我的需要对齐到右边，事实上它似乎与右边的div对齐，但这样的div不再是33%，而是只有最后三分之一的50%左右，我该怎么调整呢？另外，.line类css需要是什么？谢谢你用的是什么浏览器？我遗漏了OOCSS网格中的一些黑客，以为你用的是chrome。我用的是firefox。不过，答案应该是浏览器indpenedent。对我来说，它似乎在firefox中工作。为了简洁起见，我省略了这些技巧。这非常有效！但是你能解释一下为什么中心部门需要在其他两个部门之后，并且仍然工作吗？我不熟悉css布局。更新后，我发现为了使中间的div居中（相对于页面），其他两个div的宽度必须相同。但是，如果其中任何一个是另一个大小，则中间div不再以页面为中心。它相对于其他两个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>

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

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