如何把两个LI并排成水平,要在CSS里控制
发布网友
共6个回答
懂视网
这次给大家带来怎样使用li进行水平排列，使用li进行水平排列的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>li水平排列</title>
<style>
html{
font-size: 20px;
}
@media only screen and (min-width: 320px){
html{font-size: 20px !important;}
}
@media only screen and (min-width: 350px){
html{font-size: 22.5px !important;}
}
@media only screen and (min-width: 365px){
html{font-size: 23px !important;}
}
@media only screen and (min-width: 375px){
html{font-size: 23.5px !important;}
}
@media only screen and (min-width: 390px){
html{font-size: 24.5px !important;}
}
@media only screen and (min-width: 400px){
html{font-size: 25px !important;}
}
@media only screen and (min-width: 428px){
html{font-size: 26.8px !important;}
}
@media only screen and (min-width: 432px){
html{font-size: 27.4px !important;}
}
@media only screen and (min-width: 481px){
html{font-size: 30px !important;}
}
@media only screen and (min-width: 569px){
html{font-size: 35px !important;}
}
@media only screen and (min-width: 569px){
html{font-size: 40px !important;}
}
body{
margin: 0;
padding: 0;
}
ul{
width: 100%;
margin: 0.3rem 0;
padding:0.3rem 0;
border-top:0.05rem solid #ccc;
border-bottom: 0.05rem solid #ccc;
}
li{
width: 33%;
list-style-type: none;
display:inline-block;
font-size: 0.8rem;
border-left: 0.05rem solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
</body>
</html>
这样会有一个问题给li的宽度设置为33%，三个li标签的宽度居然超过了一行，有一点很明显就是li标签直接多了一点空白。
一、浮动
首先想到的是浮动，给li增加样式float:left。
效果如上，这样的方式，浮动会有一个问题，就是li的浮动使得ul的高度为0，解决这问题，有三种方法：
1、给ul增加height高度，但是这样不能做到自适应。
2、清楚浮动的影响，在最后的li标签后面增加一个空的p，<p style="clear:both;">（个人推荐，但是觉得代码维护上也不是很好。）
3、对ul增加zoom属性，貌似只适应与ie（我没研究）。
二、将li标签写成一行
<ul>
<li>我是第一个li</li><li>我是第二个li</li><li>我是第三个li</li>
</ul>
很奇怪为什么这样就正常了，暂时很难理解。
三、给ul增加样式去掉li标签之间空白
给ul增加font-size:0样式可以去除li标签之间的空白。这样有点需要注意的就是需要重新设置li标签的字体大小。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
怎样使用javascript Date Format方法
如何使用Zepto tap事件的穿透与点透（附代码）
热心网友
那么久问题都没有解决？我来回答吧
如果你想使用列表做一个网页导航，一般有两种方法
1、可以使用display:inline;然后给每个li使用padding或margin设置边距
2、可以使用浮动的方法float:left;来实现，这个我个人使用的比较少，我一般都是使用的第一种方法布局。
希望帮助到你！
热心网友
具体如下：
<style type="text/css">
<!--
ul{float:left; width:450px;height:auto;border:1px solid #000; }
li{float:left; border:1px solid #000;}
-->
</style>
<ul>
<li>1</li>
<li>2</li>
<li>... ...</li>
<li>N</li>
</ul>
热心网友
添加一个样式：
.li li{float:left;}
注意第一个li前面有个点
热心网友
.li li{ float: left;}
热心网友
.li li{display:inline;}
