给定这个HTML:

<div>foo</div><div>bar</div><div>baz</div>

如何让它们像这样内联显示:

Foo bar baz

不是这样的:

喷火 酒吧 巴兹


当前回答

内联div是网络的一个怪物,应该被打败,直到它变成一个span(至少10次中有9次)…

<span>foo</span>
<span>bar</span>
<span>baz</span>

...回答最初的问题…

其他回答

这对我来说很管用。我正在与bootstrap工作,我想有单选按钮内联:

                <div class="form-group form-inline-radio">
                    <div class="form-check form-radio-outline form-radio-primary mb-3">
                        <input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
                        <label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
                    </div>
                    <div class="form-check form-radio-outline form-radio-primary mb-3">
                        <input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
                        <label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
                    </div>
                </div>

而CSS:

.form-inline-radio {
    display: flex;
    overflow: hidden;
}

.form-check {
    margin-right: 10px;
}

我认为你可以使用这种方式不使用任何CSS -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

现在你正在使用块级元素,你会得到一个不想要的结果。你可以使用内联元素,比如span, small等等。

<span>foo</span><span>bar</span><span>baz</span>

这是另一回事:

Div.inline{浮动:左;} .clearBoth{清除:both;} <div class="inline">1<br />2<br />3</div> . <div class="inline">1<br />2<br />3</div> . <div class="inline">1<br />2<br />3</div> . <br class="clearBoth" /><!——你可能需要,也可能不需要——>

我只是倾向于把它们设置为固定宽度,这样它们加起来就是页面的总宽度——可能只有当你使用一个固定宽度的页面时才有用。也“浮动”。

我会使用span或将div向左浮动。浮动的唯一问题是,你必须清除浮动之后,或包含div必须有溢出样式设置为auto