2

我正在尝试显示一个项目列表，每个项目都有两个并排且均匀分布的跨度。

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 中，无论我如何处理它，列表项编号总是被推到浮动跨度之后： 在此处输入图像描述

是否有跨浏览器友好的方式来实现这种布局？

4

1 回答 1

4

只需将您的 CSS 更改为：

.ip {
    display: inline-block;
    width: 170px; 
}
于 2012-12-05T00:43:51.197 回答