css - Firefox 中的空白 nowrap

Question

我正在使用内部有 ul 列表的自定义滚动条。当 ul 列表或 li 内容扩展时，滚动条也会扩展。

我在主 div 中使用了 white-space:nowrap 以便 ul 宽度得到扩展，但它仅在 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>

CSS

.horizontalaccordion{
      height:auto; width:auto; white-space:nowrap; border-radius:4px !important; background-color: #b6b6b6; margin-right:15px ; height:95px; overflow:hidden      
}
.horizontalaccordion>ul {
    margin: 0;
    padding-left:0;
    list-style:none;
    height: 95px    ;  width:auto;   display:inline-block
}

.horizontalaccordion>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 0 !important;
    padding: 0 !important;
    list-style:none;
    width:38px;
    height: 95px; 

    /* CSS3 Transitions */
    transition: width 0.1s ease-in-out;
    -moz-transition: width 0.1s ease-in-out;
    -webkit-transition: width 0.1s ease-in-out;
    -o-transition: width 0.1s ease-in-out;
}
.horizontalaccordion>ul>li>h3 {
    display:block;
    margin: 5px 0 0 0;
    padding:10px;
    height:65px;
    width:72px;
    border-radius:6px;
    box-shadow: 0px -2px 2px #616161; 

    /* Decorative CSS */
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background-color: #B3B3B3;
    background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(#BEBEBE), to(#B3B3B3));
    background: -moz-linear-gradient(top, #BEBEBE 0%, #B3B3B3 95%);
    font:bold 12px Myriad Pro, Verdana, Geneva, sans-serif; color:#2c3e52;


    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
    -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
}

.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
    overflow: auto;
    position:relative;
    top:-88px;
    left:40px; 
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:auto;
    height:68px;
    padding:10px 50px 10px 10px; white-space:nowrap;
    background:#f0f0f0; color:#000;
    border-radius:4px;
    -webkit-box-shadow: inset 0px 2px 2px #9b9b9b; box-shadow: inset 0px 2px 2px #9b9b9b;
}
.horizontalaccordion>ul>li.hover {
    overflow: hidden;
    width: auto;
}

.horizontalaccordion>ul>li.hover>div {
    display:block; 
}

horizontalaccordion>ul>li.hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background:#000000;

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */
}
.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
    /* Decorative CSS */

}

​

Answer 1

I set up your code on a JS Fiddle尝试更好地理解问题。

一些事情:

• 您的 HTML 代码缺少开头 <li>标签，这可能会破坏东西。
• 对我来说，Firefox (14) 和 Chrome (18) 上的行为看起来完全一样。对于您所询问的空白包装问题，即使是 IE9 似乎也能正常工作。
• 如果没有随附的 Javascript，我不确定您希望此 Accordion 如何运作。

white-space:nowrap style 规则旨在防止 text 换行(参见 here )，(它在我链接到的 Fiddle 中成功地做到了这一点)，但它对防止元素换行没有任何作用。

也许你想要的是移除

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 上，您可以更改内容、更新它并发布链接(如果它可以帮助我们准确地了解您正在寻找的内容)。