html块状元素横向排列,水平居中-不定宽块状元素（收藏答案+整理）

不定宽块状元素水平居中

.container{text-align:center;}

.container ul{

list-style:none;

margin:0;padding:0;/消除文本与div边框之间的间隙/

display:inline;}

.container li{

margin-right:8px;/设置li文本之间的间隔/

display:inline;}

• 1
• 2
• 3

一些情况：

一，contion居中操作的作用：对其下属的子选择器“ul”起到居中作用。(即整体居中显示)

二，li执行display:inline;操作的目标：display:inline的意思可以理解为按行排列，(原本123应该是按列排列，也就是竖着排列)

三，ul执行display:inline;操作的目标：

其主要目的是针对于多个

• 标签所执行的，在原文件里新增一个
  • :
    • 4
    • 5
    • 6

原结果如下：1 2 3 4 5 6

假如去掉

• 中的display:inline，结果如下：

1 2 3

4 5 6

四，margin:0;padding:0(消除文本与div边框之间的间隙)：

前面指出contain居中操作的作用对其下属的子选择器“ul”起到居中作用，文本123不直接属于contain的子集，margin:0;padding:0的作用就在于此(多个ul看到的效果更明显，这里不在细说)。