Html 与中心元素组合的左浮动

在不知道第一个元素的宽度的情况下，如何将第二个元素居中放置

---

我希望“foo”向左浮动，“bar”在原始div中居中。如果我知道“foo”的宽度，我可以这样做：

福
酒吧

---

是否有其他方法可以做到这一点，而不将“剩余边距”设置为静态宽度？

尝试将第二个元素的剩余边距设置为50%

下面是一个例子：

---

尝试将第二个元素的左边距设置为50%

下面是一个例子：

---

我有点困惑你为什么想要这个，但这里：

---

我有点困惑你为什么想要这个，但这里：

---

你可以这样写：

CSS

.parent{
    text-align:center;
}
.child1,.child2{
    text-align:left;
}
.child1{
    float:left;
}
.child2{
    vertical-align:top;
    display:inline-block;
    *display:inline;/* For IE7 */
    *zoom:1;/* For IE7 */
    border:1px solid red;
}

HTML

<div class="parent">
    <span class="child1">foo</span>
    <span class="child2">bar</span>
</div>

福
酒吧

---

选中此项

您可以这样写：

CSS

.parent{
    text-align:center;
}
.child1,.child2{
    text-align:left;
}
.child1{
    float:left;
}
.child2{
    vertical-align:top;
    display:inline-block;
    *display:inline;/* For IE7 */
    *zoom:1;/* For IE7 */
    border:1px solid red;
}

HTML

<div class="parent">
    <span class="child1">foo</span>
    <span class="child2">bar</span>
</div>

福
酒吧

---

选中此

条

以居中显示什么？在

div

的中心或

div

宽度之后的

foo

剩余部分的中心？在原始div中居中。我已经更新了原始帖子。

bar

居中是什么？在

div

的中心，或者

div

宽度之后的

foo

的剩余部分的中心，以原始div为中心。我已经更新了原始帖子。这很有效，但我不明白为什么。使用width:100px的意义是什么？否则它将填充父级的整个宽度。从技术上讲，它仍然会居中，尽管可能不是您想要的方式；）请注意，

display:block

将其转换为块级元素，默认情况下填充整个宽度。换句话说，使用这种解决方案，您将失去元素的自动收缩包装行为。这是可行的，但我不明白为什么。使用width:100px的意义是什么？否则它将填充父级的整个宽度。从技术上讲，它仍然会居中，尽管可能不是您想要的方式；）请注意，

display:block

将其转换为块级元素，默认情况下填充整个宽度。换句话说，使用此解决方案，您将失去图元的自动收缩包装行为。

.foo { float: left; }
.bar {
    text-align: center;
    margin: 0 auto;
    display: block; }

.parent{
    text-align:center;
}
.child1,.child2{
    text-align:left;
}
.child1{
    float:left;
}
.child2{
    vertical-align:top;
    display:inline-block;
    *display:inline;/* For IE7 */
    *zoom:1;/* For IE7 */
    border:1px solid red;
}

<div class="parent">
    <span class="child1">foo</span>
    <span class="child2">bar</span>
</div>