我正在尝试显示一个元素列表,每个元素都有两个并排且均匀分布的跨度。
HTML 看起来像这样:
<ol id="peerTimes">
<li id="142_177_85_207__60212">
<span class="ip">142.177.85.207</span>
<span class="dateTime time">Tuesday, December 04, 2012 8:34:21 PM</span>
</li>
<li id="127_0_0_1__52375">
<span class="ip">127.0.0.1</span>
<span class="dateTime time">Tuesday, December 04, 2012 8:34:09 PM</span>
</li>
</ol>
CSS 看起来像这样:
.ip {
float: left;
width: 170px;
}
.dateTime {
width: auto;
}
在 Firefox 中,这看起来是我想要的:
但是在 Chrome 中,无论我怎么弄乱它,列表项编号总是被推到 float 跨度之后:
是否有跨浏览器友好的方式来实现这种布局?
最佳答案
只需将 CSS 更改为:
.ip {
display: inline-block;
width: 170px;
}
关于html - ol li 中的 float 跨度在 Firefox 中显示正确,但在 Chrome 中显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13714491/