使HTML水平列表不可破解

我有一个水平列表在HTML和CSS中打破，但我想使它牢不可破。使HTML水平列表不可破解

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：上的jsfiddle

#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; 
}

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

我要感谢所有那些谁都会花时间和帮助。

来源

2013-02-12 Soriyyx

问题是，你必须给'＃wrap'一个特定的宽度来产生这种效果。原因是，浮动元素不会水平溢出。 – 2013-02-12 13:19:42

你说得对。非常感谢你。 – Soriyyx 2013-02-12 13:22:54

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

来源

2013-02-12 14:33:21 Mike

使HTML水平列表不可破解

回答

相关问题