<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<!--方法二：设置display:inline显示类型设为行内元素，然后使用text-align:center实现居中-->
<style>
.container{text-align:center;}
.container ul{
list-style:none;
margin:0;padding:0;/消除文本与div边框之间的间隙/
display:inline;}
.container li{
margin-right:8px;/设置li文本之间的间隔/
display:inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>
一些情况：
一，contion居中操作的作用：对其下属的子选择器“ul”起到居中作用。（即整体居中显示）
二，li执行display:inline;操作的目标：display:inline的意思可以理解为按行排列，（原本123应该是按列排列，也就是竖着排列）
三，ul执行display:inline;操作的目标：
其主要目的是针对于多个<ul>标签所执行的，在原文件里新增一个<ul>:
<ul>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
原结果如下：1 2 3 4 5 6
假如去掉<ul>中的display:inline，结果如下：
1 2 3
4 5 6
四，margin:0;padding:0（消除文本与div边框之间的间隙）：
前面指出contain居中操作的作用对其下属的子选择器“ul”起到居中作用，文本123不直接属于contain的子集，margin:0;padding:0的作用就在于此（多个ul看到的效果更明显，这里不在细说）。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
