CSS的ul和li实现横向排列和去掉li的点
发布时间：2013-10-23 17:39:28 作者：佚名 
我要评论
我要评论怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
今天做网页是老是不懂怎么实现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>
效果如下：
复制代码
代码如下:#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>
效果如下：
相关文章
- 这篇文章主要介绍了CSS实现ul和li横向排列的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-21
- ul li的背景小图标属性设置一般会有两种情况：定义在ul里及li里，这两种定义在什么情况下使用，在下文给出详细的介绍，经常div+css布局的朋友不妨参考下，希望对大家有所帮2013-09-27
- 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观，接下来为大家介绍下具体的创建过程，感兴趣的朋友可以参考2013-09-21
- DIV+CSS里，我们用得最多的就是ul li来显示数据，如新闻按钮等,下面给大家一个css ul li的例子供学习2023-05-21
- 三行的纯CSS网站导航栏菜单，改改风格，让大家感到新鲜一点，其它主要还是使用了Li列表，整体布局简洁，美观大方，适合大部分网站使用，颜色和菜单空隙可随意调节，希望大2009-11-08
- 网页制作Webjx文章简介：不知道是标准害了大家还是大家害了标准，继class和div被滥用后，ul列表也有被不正确使用的趋势。 今天交流会上，分享前端的开发经2009-04-02
这篇文章主要介绍了CSS在UL LI的样式用法，主要是UI上的应用，我们通过代码分离的方式通过css完全控制css的样式2023-05-21
最新评论