DIV在水平滚动DIV中不垂直对齐

Question

我试图做一个<div>只有水平滚动,我通过使用实现了这一<span>s的white-space: no-wrap;内<div>用overflow-x: scroll;.问题是我不能在这些内容中使用包含文本的段落<span>,因为它会破坏Chrome中的布局.

这些是我想要的(在Firefox中有效)以及我在Chrome中所拥有的内容:

每当段落文本包含在<span>s中时,就会出现问题.

这是我的HTML和CSS:

.info {
  width: 250px;
  height: 200px;
  float: left;
}
.list {
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.item {
  height: 175px;
  width: 175px;
  display: inline-block;
  margin-left: 5px;
  overflow: hidden; /* without this, the layout breaks in Firefox, too */
}
.item * {
  white-space: normal;
}

<div id="listOne red">
  <div class="info blue">
    <p>Info regarding this list of items</p>
  </div>
  <div class="list orange">
    <span class="item yellow">
      <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
    </span>
    <span class="item yellow">
     <p>second item</p>
    </span>
    <span class="item yellow">
     <p>third item</p>
    </span>
    <span class="item yellow">
     <p>and more</p>
    </span>
  </div>
  <div class="clear"></div>
</div>

有人知道如何解决这个问题吗？或者有人知道<div>用水平滚动制作这个的另一种方法吗？(我正在使用流畅的布局,所以我的橙色div没有固定的宽度).

Answer 1

修正:-)

问题不在于换行符,而是垂直对齐.感谢tahdhaze09谁帮助我找出问题,这是我得到的解决方案:

.item {
  height: 175px;
  width: 175px;
  display: inline-block;
  margin-left: 5px;
/*overflow: hidden; without this, the layout breaks in FF too - REMOVED */
  vertical-align:text-top; /* ADDED */
}

我不知道为什么,但overflow:hidden强迫内联元素在Firefox上排在最前面.那是不必要的.vertical-align:text-top修复了所有主流浏览器的问题.