Question

我正在使用自定义滚动条，里面有ul列表。当evener的ul列表或li内容扩展时，滚动条就会被扩展。

我使用了white-space：nowrap作为主div，以便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，我不确定你希望这个如何使用它。

white-space:nowrap样式规则旨在阻止 text 包装（请参阅here），（并且它在我链接到的小提琴中成功完成），但它没有什么可以阻止元素包装。

也许你想要的是删除

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

firefox中的whitespace nowrap

1 个答案: