ul内容自适应居中

  在开发过程中,想到一个问题,平时对块级元素居中的时候都是定义一个宽度然后简单的通过margin:0 auto;实现,但是如果内容增加,是不是每次都需要修改宽度呢。我觉得需要思考一个自适应内容,并居中的方案。

  于是,我写了一个Demo去思索一下这个问题,并简单检验一下自己的想法。HTML代码如下:

1 <div class=‘container‘>
2     <ul class="clearfix">
3         <li><a href="javascript:void(0);"></a></li>
4         <li><a href="javascript:void(0);"></a></li>
5         <li><a href="javascript:void(0);"></a></li>
6     </ul>
7 </div>

  这是一个非常简单的结构,也便于让大家了解我的方法。

  CSS代码如下:

 1 .clearfix:after{
 2     content:‘‘;
 3     visibility:hidden;
 4     font-size:0;
 5     height:0;
 6     display:block;
 7     clear:both;
 8 }
 9
10 .container{
11     width:100%;
12     text-align:center;
13 }
14
15 ul{
16     display:inline-block;
17 }
18
19 li{
20      float:left;
21      width:20px;
22      height:20px;
23      margin:0 20px;
24      -webkit-border-radius: 10px;
25      -moz-border-radius: 10px;
26      -o-border-radius: 10px;
27      border-radius: 10px;
28      cursor:pointer;
29 }
30
31 a{
32     display:block;
33     background-color:#000;
34 }

实现的效果如图:

这实现思想是,先让ul定义 display:inline-block 属性,让其变成行内块级元素。

当ul成为行内块级元素后,它便有了行级元素的特性。

那么,重点来了。

只需要对ul的父级元素 .container 定义一个text-align:center;

效果便可以很明显的看到了。

更重点是,ul内的li的增减并不会对其位置造成偏移。

或许这个技巧很普通,但是我觉得这是一个思索的过程,如果有不足,请各位指出!

时间: 2024-10-20 04:58:37

ul内容自适应居中的相关文章

ul li自适应居中导航

<BODY> <div class="box"> <ul class="nav"> <li>邮箱管理</li> <li>邮箱管理</li> <li>邮箱管理</li> <li>邮箱管理</li> <li>邮箱管理</li> <li>邮箱管理</li> <li>邮箱管理</

ul宽度自适应让li居中

在div中ul不知道宽度的情况下,让li和内容居中,在做网站时,列表分页用的就是ul列表,但ul是不能给定义宽度的,应该分页数是随着内容变化的,这样的话,要让分页总是显示在中间部位,就不能再用常用的margin或是text-align这些居中的属性了,下面是这段可以让ul没有宽度的情况下,就可以居中的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

ios-UILabel居中随内容自适应,后面的控件跟在其后

如图绿蓝框所示,UILabel显示名字,Label框随名字长短而自适应,后面的性别图片跟在其后显示 分两部分:第一部分先布局 //名字 self.nameLab = [[UILabel alloc]initWithFrame:CGRectMake(0, 200, SCREEN_WIDTH, 20)]; self.nameLab.textColor = [UIColor whiteColor]; self.nameLab.font = [UIFont fontWithName:@"Helvetic

自适应居中

一.窗体居中 1 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */ 简析: position:固定位置显示(absolute|fixed): [absolute:窗口大小由上层position为absolute.fixed.relative的子父关系窗口决定:fixed:窗口大小由上层层position为fixed的子父关系窗口决定] t

报表参数控件和报表内容自动居中设置方法

在用报表工具FineReport设计报表时,常遇到以下问题: 1.参数控件(多行控件)的居中问题.2.报表内容的居中和自适应宽度问题,以及报表标题设置了重复标题和冻结如何不影响居中.3.图表居中和自适应宽度问题. 解决方案如下: 1.如果使用的是FineReport的7.1.1版本:将参数控件界面的控件手动来拖,当然设计宽度是可以变的 , 按照上图中的设置方法,就可以整体居中 如果是FineReport7.1 版本:点击参数界面空白处   右边属性界面有个位置选择来居中 2.居中显示不影响表头

margin+absolute布局:右栏固定主内容自适应 demo

margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300px;} #hd2,#ft2{height:50px;background-color:#aaa;} #bd2{position:relative;margin:10px 0;} #aside2{position:absolute;top:0;right:0;width:200px;backgroun

Textarea高度随内容自适应地增长,无滚动条

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>枫芸志 » 文本框textarea高度自适应增长/伸缩</TITLE> </HEAD> <BODY> <textarea id="txtContent" rows="5&q

CSS如何实现div宽度根据内容自适应

在实际应用中,可能有这样的需求,那就是需要div根据内容进行宽度自适应.有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应,其实这是错误的,因为在默认状态下,div的宽度值是百分之百,也就是会占满整个父元素宽度.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content=&qu

父容器不根据内容自适应高度的解决方法

Div不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容器中有一个空格.