三，<ul><li>实际应用时遇到的问题

在布局中使用的比较多的就是这个，快速排列一行或多行文字，还有横排显示作为导航栏标题栏等等
书写格式：
<ul>
    <li>山东教育.....</li>
</ul>
多行呈现形式文字都是在li中

其中属性有，type定义前面黑点的呈现形式有方形，空心圆点等等
在很多网站有这种显示

这并不是使用了自身的属性，而是css样式或者图片，
ul {
    list-style-image: url(image/dot4.png);
    list-style-type: none;
}
这样影none属性隐藏了自带的黑点，然后使用image图片路径达到替换的目的。
不用图片也可以达到某些效果，比如在<li>文字套<span>标签，然后给<span>左border上一个边框，再将内容用padding-left撑开，不推荐使用，推荐使用图片定义。
无序列表横向使用：
 先看一下代码
<ul class="s" type="square" >    
        <li >22</li>
        <li >22</li>
        <li >22</li>
</ul>
<style>
.s li{
    margin-left:50px;
    list-style-type:none;
    background-image:url(image/nav-3-li.jpg);
    background-repeat:no-repeat;
        float:left;
}
</style>
使用了float属性，重点是使用给<li>标签，而不是<ul>。浮动之后会成一排显示，如果left改成right，那么内容的开头文字将会去右边。现实之后会有文字过于紧凑的现象，使用margin或padding将文字撑开即可。

在列表后显示时间：

在<li>将要显示的时间写入单独的标签，给次标签添加float：right;即可。
最后下划线<li>添加border-bottom。

当li的type被图片替换时，可以通过使用li的padding-left控制与图片的距离

在使用ul，需要行高撑起来的效果时，要注意此时不能呈现两行效果，否则实际行高将会超出预算结果，li的可以使用padding属性撑起两行行高。

三，<ul><li>实际应用时遇到的问题的更多相关文章

1. &lbrack;笔记&rsqb;ul&gt&semi;li&gt&semi;a做分布时&comma; 让其居中显示效果

   结构: <div id="page"> <ul> <li><a href="#">首页</a>&lt ...

2. html ul li的学习

   DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

3. 终于成为博客员的一员了，这是我的第一篇博文，写一个关于ul li内容宽度的问题和解决方案

   第一次写博文,写一个刚才遇到的问题吧. 关于ul li文字长度不固定,一行显示多列.当指定宽度时,文字长度超过指定的li宽度时解决方案: 如下代码 <h4>发送对象(共10个会员)< ...

4. css控制UL LI 的样式详解

   用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

5. css控制UL LI 的样式详解&lpar;推荐&rpar;

   代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...

6. html-2&comma; a img ul li ol dl dt dd 标签与列表标签的简单使用

   <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

7. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

   会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

8. ul li设置横排，并除去li前的圆点

   效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

9. ul li横向排列及圆点处理

   如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

随机推荐

1. JavaScript学习笔记-setTimeout应用

   setTimeout应用 var ids = [];function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout( ...

2. 小梅哥FPGA数字逻辑设计教程——基于线性序列机的TLC5620型DAC驱动设计

   基于线性序列机的TLC5620型DAC驱动设计 目录 TLC5620型DAC芯片概述:    2 TLC5620型DAC芯片引脚说明:    2 TLC5620型DAC芯片详细介绍:    3 TLC ...

3. poj2240 floyd

   //Accepted 732 KB 782 ms //floyd应用 #include <cstdio> #include <cstring> #include <ios ...

4. Python字符串的修改以及传参

   前两天去面试web developer,面试官提出一个问题,用JavaScript或者Python实现字符串反转,我选择了Python,然后写出了代码(错误的): #!/usr/bin/env pyt ...

5. window下安装oracle数据库

   Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点‘是’ 3.下图后,选择创建和配置数 ...

6. Mac&colon; the original hosts

   ## # Host Database # # localhost is used to configure the loopback interface # when the system is bo ...

7. jfinal 源码学习

   源由 最近闲来无事,顺带看了下jfinal的源码,以下均为自己的个人理解,如有错误请指定: jfinal 使用 在web.xml中配置JfinalFilter 并定义JfinalConfig的类 自定 ...

8. 如何测量并报告ASP&period;NET Core Web API请求的响应时间

   介绍 大家都知道性能是API的流行语.而相应时间则是API性能的一个重要并且可测量的参数.在本文中,我们将了解如何使用代码来测量API的响应时间,然后将响应时间数据返回到客户端. 作者:依乐祝 原文地 ...

9. Win10 Hyper-v下虚拟机使用无线网络

   首先要承认一点的是写这个随笔更大的初衷是想吐槽,搜了半天,全是一种方法,就是创建一个新的网络适配器,配置为外部网络啥啥啥,用倒是能用,就是网速那叫一个感人,我的是电信百兆光纤网页打开都如蜗牛爬,无法忍 ...

10. Study 7 —— CSS美化背景和边框

    图片透明度属性:opacity 背景图片重复属性:background-repeat背景图片位置属性:background-position background-postion:横坐标 纵坐标; b ...