Css firefox中的空白nowrap

Css firefox中的空白nowrap,css,scroll,nowrap,Css,Scroll,Nowrap,我使用的自定义滚动条内有ul列表。当ul列表或li内容扩展时,滚动条将扩展 我在主div中使用了空格:nowrap,因此ul width得到了扩展,但它只在chrome中起作用,在firefox/IE和其他浏览器中不起作用 这是我的密码 <div class="horizontalaccordion"> <ul> <li> <h3>Heading 2</h3

我使用的自定义滚动条内有ul列表。当ul列表或li内容扩展时,滚动条将扩展

我在主div中使用了空格:nowrap,因此ul width得到了扩展,但它只在chrome中起作用,在firefox/IE和其他浏览器中不起作用

这是我的密码

<div class="horizontalaccordion">
            <ul>
              <li>
                <h3>Heading  2</h3>
                <div>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
              </li>
              <li>
                <h3>Heading 3</h3>
                <div>Content For Panel 3.</div>
              </li>
              <li>
                <h3>Heading 4</h3>
                <div>Content For Panel 4</div>
              </li>
              <li>
                <h3>Heading 1</h3>
                <div>Content For Panel 1.</div>
              </li>
                <h3>Heading 3</h3>
                <div>Content For Panel 3.</div>
              </li>
              <li>
                <h3>Heading 2</h3>
                <div>Content For Panel 2.</div>
              </li>
              <li>
                <h3>test</h3>
                <div>Content For Panel sow</div>
              </li>
                      <li>
                <h3>Heading 3</h3>
                <div>Content For Panel 3.</div>
              </li>
              <li>
                <h3>Heading 4</h3>
                <div>Content For Panel 4</div>
              </li>
            </ul>
          </div>
试着更好地理解这些问题

有几件事:

您的HTML代码缺少一个开始标记,这可能会破坏一些东西。 对我来说,Firefox14和Chrome18上的行为看起来完全一样。对于你所问的空白包装问题,甚至IE9似乎也在起作用。 如果没有附带的Javascript,我不确定您希望它如何运行。 空白:nowrap样式规则旨在防止文本换行,请参见,它在我链接到的小提琴中成功地做到了这一点,但它没有阻止元素换行

也许你想要的是移除

whitespace: nowrap
并使用其中一种:

overflow-x: visible; /* shows all items even if the area is too small */
overflow-x: scroll; /* Will always show a scrollbar */
overflow-x: auto; /* Will only show a scrollbar when the content doesn't fit */
overflow-x: hidden; /* Content will just drop off the end of the page */
我希望这对你有帮助。如果你能确切地说明你所希望的是什么,那就太好了。在JSFiddle上,您可以改变周围的事物,更新它,并发布一个链接,如果它能帮助我们准确地看到您想要的是什么

overflow-x: visible; /* shows all items even if the area is too small */
overflow-x: scroll; /* Will always show a scrollbar */
overflow-x: auto; /* Will only show a scrollbar when the content doesn't fit */
overflow-x: hidden; /* Content will just drop off the end of the page */