CSS的ul和li实现横向排列和去掉li的点

怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,在此与大家分享下,感兴趣的朋友可以参考下,以备不时之需

 

今天做网页是老是不懂怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,做个笔记:

复制代码
代码如下:

#ul {
float:left;
}
#ul li {
float:left;
list-style:none;
}

顺便拓展一下li的list-style:

复制代码
代码如下:

ul {
list-style:square inside url('.../.img');
}
ul {
list-style:circle;
}
ol {
list-style:upper-roman;
}
ol {
list-style:lower-alpha;
}

再写个今天看到的东西,是关于dl,dt,dd的,其实就是类似于子类的,我比较少见到各个网页上用:

复制代码
代码如下:

<dl>
<dt>Apple</dt>
<dd>苹果</dd>
<dt>Boy</dt>
<dd>男孩</dd>
</dl>

效果如下:

时间: 2024-09-04 13:30:47

CSS的ul和li实现横向排列和去掉li的点的相关文章

Li的横向排列自适应宽度问题

问题|自适应 众所周知,FF和OPERA即其它遵循CSS2标准的浏览器由于版本的不断改进,早就支持: display:table dispaly:table-cell dispaly:table-row dispaly:table-row- group dispaly:table-column dispaly:table-column-group 等属性. (至少是 FF1.0,OPERA7就能支持了,之前的就不太清楚了)那还犹豫什么?开始动手吧(为了演示加了一些 padding和border)

用ul、li做横向导航

原文:用ul.li做横向导航 1.生成Site.css文件(注:一定要将该文件的编码格式设置为utf-8,否则ie6有可能出现乱码) /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */}/

CSS控制ul缩进间距和去掉li点的方法

 一.CSS控制ul缩进间距的方法: <style type="text/css"> ul{margin-left:-10px;} </style> <ul>      <li>电脑软硬件应用网www.45it.com</li> </ul> 二.CSS去掉li点的三种方法: 方法一: <ul>      <li style="list-style-type:none;">

css div 实现图片从左向右自动横向排列

我们先来看看效果图片再一步步分析实例代码了. 首先我们来看这一块代码. <dl>      <dt>      <a href="pbum.php?uid=14" ><span></span>      <img src="http://111cn.net/124461405936.jpg" alt="image" width="170" height=&quo

CSS使用ul进行网页的多列布局

  几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教. 当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用〈ul〉列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用〈ul〉来进行页面的多列布局.         这是一个固定

如何让asp.net中Menu菜单的子菜单横向排列

问题描述 Menu菜单中的子菜单默认是纵向排列的,怎么改成横向排列,设置Orientation=horizontal只是改变主菜单的方向,如何改变子菜单横向排列呢?我是从数据库读取数据,动态创建的Menu请大家给个实例, 解决方案 解决方案二:求解,咋没人呢?

php 遍历数据表数据并列表横向排列的代码_php技巧

复制代码 代码如下: <?php $a = array (1,2,3,4,5,6,7,8,9,10,11); $i = 0; ?> <table border=1> <tr> <? foreach ($a as $k){ if($i%3==0) {//该处表示需要横向排列的列数. echo "</tr><tr>"; } echo "<td>",$k,"</td>&qu

css去掉li前面的圆点

这是一个使用li的例子 <ul>      <li>百度</li>      <li>雅虎</li>      <li>新浪</li>      <li>谷歌</li> </ul> 运行这段html代码,会发现在前面有一个黑色的圆点,有时候会觉得这个圆点多余,所以要去掉.去掉的使用方法是: <ul>      <li style="list-style-typ

关于去掉Li标签前面的小圆点和距离/显示下划线

解决方法 去掉Li标签前面的距离:     设置ul   padding:0px; 去掉Li标签前面的小圆点: 设置li      list-style-type:none; 显示下划线:    text-decoration:underline;