您的位置：首页 > 其它

关于如何让li居中的解决方法

2016-04-06 18:21 155 查看

问题：

　　本人在写网页时，想要写一个侧边栏，又想要做成选项卡的样子，比如设置4个li，分别为：诗词，文章，音乐，影视；每点击一个li，下面便会出现其中的一个选项卡结果。

　　于是，需要设置li的高和宽，使其居中于侧边栏头部的中间。但是，如果不用ul的margin-left来做的话，最初怎么也无法解决；可使用margin-left，需要计算其中的li的margin，padding，border等繁琐的事，于是我想用其他的方法。

解决方法一：利用margin-left设置；

比如侧边栏的div宽300px;我有四个li，每个设置height：30px；width：60px；并让这四个li位于侧边栏的头部；就可以设置ul的margin-left：80px；

这样就会使四个li居于中间；如果想使四个li之间有间隔。可以设置li的margin-left:5px;这样就需要改变先前ul的margin-left为（300-240-20）/2-2.5，因为margin-left是透明的，所以才会有上面这个计算式子。可见可能会出现小数，这样是我们要避免的。利用ul的margin-left很简单地设置居中，只是不是强迫症患者的首选。因为这个方法，大家应该都会，而且百度一下，都会出来这样的例子，在此不贴代码。

在这个方法中，我们可以设置ul的高和宽，但只要不让ul的宽超过div的宽，以及不让ul的宽低于四个li的和的宽，就不会出现排版错误。

本人也不喜欢这个方法，于是，就有了第二种方法。

解决方法二：利用ul的text-align：center属性；

对于第二种方法，首先要说的是，设置ul的display：table，text-align:center。是不是觉得好神奇，怎么会出现display：table，说实话，这也是我第一次用到这个属性，虽然知道有这个属性，但一般还真不用，我们似乎只用none，inline和block，但这里我们必须用这个属性，不然解决不了。下面是一段代码：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

#div1{

width:500px;

height:500px;

background-color: red;

}

#ul1{

display: table;

margin:0 auto;

height:40px;

text-align: center;

padding:0;

}

.li1{

float: left;

margin-left: 5px;

padding:0;

width:70px;

height:60px;

line-height: 60px;

font-size: 20px;

background-color: yellow;

list-style-type: none;

}

</style>

</head>

<body>

<div id="div1">

<ul id="ul1">

<li class="li1">11111</li>

<li class="li1">22222</li>

<li class="li1">33333</li>

<li class="li1">44444</li>

</ul>

</div>

</body>

</html>

这段代码可以解决居中方法，注意：ul设为display：table；text-align：center；但记住千万千万不可以设置ul的宽，不然无法实现。

解决方法三：其实这不能用的方法，这方法太渣；

就是ul的设为text-align：center；

li的设为display：inline；

但这样的话，就无法做出li的宽和高，虽然也会居中，但已经失去了其解决的意义。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航