当前位置: 代码迷 >> HTML/CSS >> <OL>或ul里的<Li,是不是横着排(float:left) 显示不了数字啊该怎么解决
  详细解决方案

<OL>或ul里的<Li,是不是横着排(float:left) 显示不了数字啊该怎么解决

热度:1119   发布时间:2012-03-11 18:15:38.0
<OL>或ul里的<Li,是不是横着排(float:left) 显示不了数字啊
HTML code

         <ol>
            <li style="float:left; width:143px;">aa</li>
            <li>bb</li>
        </ol>




 如果把float:left左浮动去掉 竖着排列就好了 ,如果统一设置li的左浮动,那一个都显示不出来··

那究竟该怎么才能让ol或li带数字的横着排 显示出数字呢

------解决方案--------------------
就把第一个的float:left去掉就行了
ol li的样式里面不要有list-style:none或者list-style-type:none
或者加上list-style:decimal 
理论上来说都是会出数字的
------解决方案--------------------
list-style 设置为inside decimal 。给li设置padding-left 10px左右,也可以设置padding 4面的值。试试看哈
------解决方案--------------------
探讨
那究竟该怎么才能让ol或li带数字的横着排 显示出数字呢

------解决方案--------------------
ol,ul是列表元素~以下代码在IE6,ie7没有数字
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#conn{background-color:#c00;width:260px;font-size:18px;}
#conn ul{border:1px solid #ddd;background-color:red;float:left;width:260px;}
#conn ul li{float:left;border:1px solid #333;background-color:#fff;list-style-position:inside;} 

</style>
</head>

<body>
<div id="conn">
<ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
          <li>e</li>
</ul>
</div>
</body>
</html>

------解决方案--------------------
建议你做一下偏移,把内容向右边做一下相对定位!
  相关解决方案