css - 将 li 元素排成一行

Question

这是一个sample demo对于 div 滚动条。我需要 li 元素在同一行中对齐以获得水平滚动条。我已经使用了 white-space:nowrap 但它仍然无法正常工作。 http://jsfiddle.net/gwUyn/

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

}

Answer 1

在你的类(class) .horizo​​ntalaccordion > ul > li

添加

display:inline-block

删除

    display:block
    float:left

你的代码可以工作