1

I am using the custom scroll bar which has ul list inside. When evener the ul list or li content extends then the scroll bar is getting extended.

I have used white-space:nowrap for the main div so that ul width is getting extended but it is working only in chrome but not working in firefox/IE and other browsers.

Here is my code

<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 */

}

​
4

1 回答 1

2

我在 JS Fiddle 上设置了您的代码，以尝试更好地理解这些问题。

一些东西：

  • 您的 HTML 代码缺少一个开始<li>标记，这可能会造成破坏。
  • 对我来说，Firefox (14) 和 Chrome (18) 上的行为看起来完全一样。对于您要询问的空白包装内容，即使是 IE9 似乎也可以正常工作。
  • 如果没有随附的 Javascript，我不确定您希望它如何发挥作用。

white-space:nowrap样式规则旨在防止文本换行（参见此处），（它在我链接到的 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 上，您可以更改、更新并发布链接，如果它可以帮助我们准确了解您正在寻找的内容。

于 2012-08-27T09:09:04.713 回答