文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS怎样实现ul和li横向排列

2023-06-08 04:52

关注

这篇文章主要介绍了CSS怎样实现ul和li横向排列,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:

float:left
这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除浮动,或者设置固定宽高

display:inline-block

即把li变为行内元素且可以设置宽高以及边距,这样也有一个问题,低版本的Ie浏览器不兼容inline-block,建议在其后再加两个属性兼容低版本ie
*display:inline;
*zoom:1;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>CSS + ul li 横向排列的两种方法 </title></head><body>  <div id="nav">  <ul>    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>        <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>  </ul>  </div></body></html>

CSS代码一:

* {    margin: 0;    border: 0;    padding: 0;    font-size: 13pt;} #nav {    height: 40px;    border-top: #060 2px solid;    border-bottom: #060 2px solid;    background-color: #690;} #nav ul {    list-style: none;    margin-left: 50px;} #nav li {    display: inline;    line-height: 40px;    float:left} #nav a {    color: #fff;    text-decoration: none;    padding: 20px 20px;} #nav a:hover {    background-color: #060;}

CSS代码二:

* {    margin: 0;    border: 0;    padding: 0;    font-size: 13pt;} #nav {    height: 40px;    border-top: #060 2px solid;    margin-top: 100px;    border-bottom: #060 2px solid;    background-color: #690;} #nav ul {    list-style: none;    line-height: 40px;    margin-left: 50px;} #nav li {    display: block;    float: left;} #nav a {    display: block;    color: #fff;    text-decoration: none;    padding: 0 20px;} #nav a:hover {    background-color: #060;}

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS怎样实现ul和li横向排列”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯