如何让li标签中的两个li是块级元素吗分成多行显示

来源：蜘蛛抓取(WebSpider) 时间：2016-12-31 15:01 标签： 隐藏li标签
欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 如何使用样式让并排显示不换行篇
默认ul li布局竖列显示
这里divcss5介绍使用两种使用让li标签布局并排显示，一种使用，另外一种使用浮动。
一、使用display让li并排显示
CSS样式单词：
display:inline
具体代码如下
1、不换行横向并排CSS代码：
li{&display:inline}&
2、HTML代码片段：
&&href=&/&DIVCSS5&&href=&.cn/&CSS制作&&href=&/&DIV&CSS&&
3、案例效果截图
使用display让li布局并排显示截图
二、使用float浮动样式让li并排显示
单词：float:left
1、解决css样式代码：
&li{&float:&list-style:none}&/*&：加list-style:none去掉li默认产生&点&&*/&&
2、html代码片段：
&&href=&/&DIVCSS5&&href=&.cn/&CSS制作&&href=&/&DIV&CSS&&
3、案例截图
使用float解决横排显示截图
三、li并排显示总结
这里DIVCSS5介绍两种情况解决，当然还有其他解决实现方法。大家下来可以实践以上两种方法并掌握，灵活运用。
扩展了解：
2、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 09:40
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台53899人阅读
jquery（43）
在jquery中，你能够通过逗号，来分隔字符选择多个选择。
$(.class1, .class2, #id1)
在以上的例子中，将会选择含有类名为class1，和class2及id为1的所有元素。
Jquery实例：
在以下的例子中，有类名为p1和类名为p2 和id 为div3 的所有元素将会动态的添加一个红色的边框。
&title&select mutiple elements example&/title&
&script type=&text/javascript& src=&../jquery-1.11.1.min.js&&&/script&
&script type=&text/javascript&&
$(document).ready(function(){
$(&.p1,.p3,#div3&).css(&border&,&2px solid red&);
&h1&select mutiple element example&/h1&
&p class=&p1&&P1&/p&
&p class=&p2&&P2&/p&
&p class=&p3&&P3&/p&
&p class=&p4&&P4&/p&
&div id=&div1&&DIV1&/div&
&div id=&div2&&DI2&/div&
&div id=&div3&&DI2&/div&
&div id=&div4&&DI2&/div&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：288054次
积分：4167
积分：4167
排名：第5949名
原创：43篇
转载：10篇
译文：203篇
(1)(2)(1)(154)(15)(3)(5)(16)(37)(13)(9)li 元素标签之间的空隙是怎么回事，求解~~
&!DOCTYPE html&&html&&head&
&meta charset="gb2312"&
&title&实践题 - 选项卡&/title&
&style type="text/css"&
/* CSS样式制作 */
* { margin:0 padding:0}#container {margin:20width:300height:170 }#container ul {list-style:margin:10px auto 0width:280height:32border-bottom:2px solid #7E2F00;}#container ul li { display:inline- width:70 text-align: line-height:30margin-left:5border:1px solid #B2B0AA;border-bottom:}#container ul li.current {border-top:2px solid #7E2F00;border-bottom:2px solid #}#container ul li:hover{cursor:}
#container .display {margin:0width:278height:120border:1border-top:}#container .display p{padding:7font-size:13}#container .hide{display:}
&script type="text/javascript"&
// JS实现选项卡切换
window.onload = function(){var li = document.getElementsByTagName("li");for(var i=0; i&li. i++){li[i].index=i;li[i].setAttribute("onclick","clk(this)");}}function clk(o){// console.log(o.index);var li = document.getElementsByTagName("li");for(var i=0; i&li. i++){li[i].className = "";}o.className = "current";var ndiv = document.getElementsByTagName("div");// console.log(ndiv.length);for(var j=1; j&ndiv. j++){ndiv[j].className="hide";}var k=o.index+1;// console.log(k);ndiv[k].className="display";}
&/script& &/head&&body&&!-- HTML页面布局 --&&div id="container"&&!--ul...li选项卡--&&ul&&li&房产&/li&&li&家居&/li&&li&二手房&/li&&/ul&&!--下边对应三个内容--&&div&&p&275万购昌平邻铁三居 总价20万买一居&/p&&p&200万内购五环三居 140万安家东三环&/p&&p&北京首现零首付楼盘 53万购东5环50平&/p&&p&京楼盘直降5000 中信府 公园楼王现房&/p&&/div&&div&&p&40平出租屋大改造 美少女的混搭小窝&/p&&p&经典清新简欧爱家 90平老房焕发新生&/p&&p&新中式的酷色温情 66平撞色活泼家居&/p&&p&瓷砖就像选好老婆 卫生间烟道的设计&/p&&/div&&div&&p&通州豪华3居260万 二环稀缺2居250w甩&/p&&p&西3环通透2居290万 130万2居限量抢购&/p&&p&黄城根小学学区仅260万 121平70万抛!&/p&&p&独家别墅280万 苏州桥2居优惠价248万&/p&&/div&&/div& &/body&&/html&
的确，我试了一下，写成这样就消除了间隙&ul&&li&房产&/li&&li&家居&/li&&li&二手房&/li&&/ul& ，可是每次写网页时候必须这样写吗，有没有别的解决办法呢？
写下你的评论...
这个方法感觉很吊的样子,能想出来简直是奇才,在下佩服
卧槽，碉堡了，完美解决问题！！
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2

我要回帖

更多关于 隐藏li标签 的文章

 

随机推荐