给定这个HTML:
<div>foo</div><div>bar</div><div>baz</div>
如何让它们像这样内联显示:
Foo bar baz
不是这样的:
喷火 酒吧 巴兹
给定这个HTML:
<div>foo</div><div>bar</div><div>baz</div>
如何让它们像这样内联显示:
Foo bar baz
不是这样的:
喷火 酒吧 巴兹
当前回答
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div>
http://jsfiddle.net/f8L0y5wx/
其他回答
试着这样写:
div{边界:1px固体#CCC;的 <div style=“显示:inline”>a</div> <div style=“显示:inline”>b</div> <div style=“显示:inline”>c</div>
我认为你可以使用这种方式不使用任何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>
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
这对我来说很管用。我正在与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;
}
内联div是网络的一个怪物,应该被打败,直到它变成一个span(至少10次中有9次)…
<span>foo</span>
<span>bar</span>
<span>baz</span>
...回答最初的问题…