Question

我正在尝试仅使用水平滚动制作<div>，我使用<span> white-space: no-wrap; <div> overflow-x: scroll; <span>来实现此目的}。问题是我无法在这些<span>中使用包含文字的段落，因为它会破坏Chrome中的布局。

这些是我想要的（在Firefox中有效）以及我在Chrome中获得的内容：

每当段落文本包含在.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; } s内时，就会出现问题。

这是我的HTML和CSS：

<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的另一种方法吗？（我正在使用流畅的布局，所以我的橙色{{1}}没有固定的宽度。）

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已在所有主流浏览器中修复此问题。

Answer 2

您是否尝试过将top：0添加到列表规范中？（不能在这里尝试，只是我的想法）。

Answer 3

只是在黑暗中拍摄，但你可以尝试删除div之间的所有空白区域吗？（没有缩进）。

而且，<p>内的<span>将无法验证。这可能不是你问题的根源，但是在寻找错误时总会有有效的HTML。

Answer 4

您不能只使用position:relative将.item类更改为float:left，以便它们彼此相邻吗？

这适用于FF / Chrome：

.item {
  height: 175px;
  width: 175px;
  position: relative;
  float: left;
  margin-left: 5px;
  overflow: hidden;
}

Answer 5

我在FF，Chrome或Safari中的代码没有问题。

这是相同的代码，但可以肯定：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Highlighting Elements</title>
        <style>
.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 FF too */
}
.item * {
  white-space: normal;
}
</style>

    </head>
    <body>

        <div id="listOne red">
  <div class="info blue">
    <p>info regarding this list of itens</p>
  </div>
  <div class="list">
    <span class="item">
      <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
    </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>
 <span class="item">
 <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
 </span>

  </div>
  <div class="clear"></div>
</div>


    </body>
</html>

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

5 个答案: