html 设置li 平均分配空间,html – 均匀分配li项目

这是使用text-align：justify做一个方法.

这种方法的优点是圆/气泡图案均匀间隔,您还可以控制下面的标签的对齐.

您首先需要将标签包装在容器中,我使用< p>标记,并添加一个终止< li>元素,相当于清算元素.

• 1.Warenkorb

• 2.Adresse

• 3.Zahlungsart

• 4.Bestätigen

• 5.Danke

对于CSS：

.steps {

width:100%;

list-style-type: none;

padding:0;

margin:0 auto;

background:url(http://tnsdev.cloudapp.net/dev/steps_slice.png) repeat-x;

text-align: justify;

line-height: 0;

}

.steps li {

width: auto;

display: inline-block;

margin: 0;

padding: 0;

line-height: 1.5;

position: relative;

text-align: center;

}

.steps li .icon {

background:url(http://tnsdev.cloudapp.net/dev/steps_icon.png) top center no-repeat;

height:44px;

width:44px;

}

.steps li p {

position: absolute;

width: 100px;

top: 50px;

left: -22px;

margin: 0;

}

.steps li.first p {

text-align: left;

left: 0;

}

.steps li.last p {

text-align: right;

left: auto;

right: 0;

}

.steps li.filler {

width: 100%;

height: 0;

font-size: 0;

vertical-align: top;

}

首先,我在父容器上使用text-align：对齐,以均匀分布那些缩进为适合squareicon元素的内联块的li元素.

.filler行强制新的100％宽度的行,允许文本对齐工作.我设置vertical-align：top(和父项中的line-height：0)以摆脱由填充元素创建的空格的孤儿.

然后使用绝对定位将标签从流程中取出,并调整第一个和最后一个列表项的文本对齐方式,并使用负边距定位它们以使标签居中.

一个限制是为标签指定了宽度,因此您应该按照您的配置向父容器添加最小宽度.

你有足够的空间来调整需要的东西.