單列流li項目

這是div滾動條的sample demo。我需要將li項目對齊到同一行以獲取水平滾動條。我已經使用了white-space：nowrap，但仍然無法使用。 http://jsfiddle.net/gwUyn/單列流li項目

HTML

<div class="horizontalaccordion"> 
      <ul class="test"> 
       <li> 
        <h3>Heading 2</h3> 
        <div>test 
        </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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</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> 
       <li> 
        <h3>Heading 1</h3> 
        <div>Content For Panel 1.</div> 
       </li> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</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> 
       <li> 
        <h3>Heading 1</h3> 
        <div>Content For Panel 1.</div> 
       </li> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</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> 
       <li> 
        <h3>Heading 1</h3> 
        <div>Content For Panel 1.</div> 
       </li> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</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> 
       <li> 
        <h3>Heading 1</h3> 
        <div>Content For Panel 1.</div> 
       </li> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</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> 
       <li> 
        <h3>Heading 1</h3> 
        <div>Content For Panel 1.</div> 
       </li> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</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> 
       <li> 
        <h3>Heading 1</h3> 
        <div>Content For Panel 1.</div> 
       </li> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</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> 
       <li> 
        <h3>Heading 2</h3> 
        <div>Content For Panel 2.</div> 
       </li> 
       <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>Heading 3</h3> 
        <div>Content For Panel 3.</div> 
       </li> 
       <li> 
        <h3>test</h3> 
        <div>Content For Panel sow</div> 
       </li> 
      </ul> 
     </div>

CSS

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

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

}

來源

2012-08-27 Sowmya

在類 .horizontalaccordion> ul>李

添加

display:inline-block

刪除

display:block 
    float:left

你的代碼將工作

來源

2012-08-27 13:17:28 supersaiyan

啊我的是，我沒有錯字錯日Thnx爲編輯@podiluska – supersaiyan

我改變了我的小提琴這種變化，但它仍然沒有工作。請chk更新小提琴http://jsfiddle.net/gwUyn/5/ – Sowmya

刪除浮動以及 – supersaiyan

回答

相關問題