html - 使 HTML 水平列表不可破坏

Question

我有一个用 HTML 和 CSS 制作的水平列表，但我想让它牢不可破。

HTML：

<div id="wrap">  
    <ul data-role="listview" class="tilelist">
        <li class="box" id="10" data-icon="false">
            <div class="tit">Element1</div>
        </li>
        <li class="box" id="20" data-icon="false">
            <div class="tit">Element2</div>
        </li>
        <li class="box" id="30" data-icon="false">
            <div class="tit">Element3</div>
        </li>
        <li class="box" id="40" data-icon="false">
            <div class="tit">Element4</div>
        </li>
        <li class="box" id="50" data-icon="false">
            <div class="tit">Element5</div>
        </li>
        <li class="box" id="60" data-icon="false">
            <div class="tit">Element6</div>
        </li>
        <li class="box" id="70" data-icon="false">
            <div class="tit">Element7</div>
        </li>
        <li class="box" id="80" data-icon="false">
            <div class="tit">Element8</div>
        </li>
        <li class="box" id="90" data-icon="false">
            <div class="tit">Element9</div>
        </li>
    </ul>
</div>

CSS：

#wrap{
    margin: 3%;
    width: auto;
    overflow: auto;
}
ul.tilelist {
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
ul.tilelist li {
    display: inline;
    list-style-type: none;
    border: 1px solid;
    border-radius: 8px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    margin: 8px;
    width: 200px;
    min-height: 80px;
    float: left;
}
.tit {
    background-color: #d3d3d3;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%;
    height: 36px;
    padding-top: 13px;
    font-size: 20px;
    text-align: center;
}

jsFiddle 上的代码：http: //jsfiddle.net/9eSMD/1/

我要感谢所有愿意花时间和帮助的人。

Answer 1

ul.tilelist li {
    display: inline-block; /*change inline to inline-block */
    list-style-type: none;
    border: 1px solid;
    border-radius: 8px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    margin: 8px;
    width: 200px;
    min-height: 80px;
    /* float: left */
}