如何让多个li居中于ul中间

最新推荐文章于 2023-11-24 18:39:44 发布

denghan8735

最新推荐文章于 2023-11-24 18:39:44 发布

阅读量783

点赞数

原文链接：http://www.cnblogs.com/kangjia2013/p/5360501.html

版权

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~关于如何让li据中的解决方法：~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

问题：

　　本人在写网页时，想要写一个侧边栏，又想要做成选项卡的样子，比如设置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>