均匀分配李项目

Question

希望这是自我解释：

HTML：

<ul class="steps">
<li class="step1 first">
    <div class="icon basket"></div>
    1.Warenkorb
</li>
<li class="step2">
    <div class="icon registration"></div>
    2.Adresse
</li>
<li class="step3">
    <div class="icon payment"></div>
    3.Zahlungsart
</li>
<li class="step4">
    <div class="icon order"></div>
    4.Bestätigen
</li>
<li class="step5 last">
    <div class="icon thankyou last"></div>
    5.Danke
</li>
<div style="clear:both"></div>

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;
 }

 .steps li {
width:20%;
float:left;

}

.steps li .icon {
background:url(http://tnsdev.cloudapp.net/dev/steps_icon.png) no-repeat;
height:44px;
width:44px;
}

http://jsfiddle.net/HYYwn/1/

我如何才能实现气泡之间的距离完全相同，并且step5的气泡位于最右边？ 我约束有5个不同的li并使用％，所以它保持响应。

我已经暂时无法解决这个问题了！

编辑：

结果应该是这样的

 O--O--O--O--O 

而不是喜欢

--O--O--O--O--O  

要么

O--O--O--O--O--  

要么

--O--O--O--O--O--

Answer 1

这是使用text-align: justify执行此操作的一种方法。

这种方法的优点是圆/气泡图案均匀分布，您还可以控制下方标签的对齐。

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

<ul class="steps">
    <li class="step1 first">
        <div class="icon basket"></div>
        <p>1.Warenkorb</p>
    </li>
    <li class="step2">
        <div class="icon registration"></div>
        <p>2.Adresse</p>
    </li>
    <li class="step3">
        <div class="icon payment"></div>
        <p>3.Zahlungsart</p>
    </li>
    <li class="step4">
        <div class="icon order"></div>
        <p>4.Bestätigen</p>
    </li>
    <li class="step5 last">
        <div class="icon thankyou last"></div>
        <p>5.Danke</p>
    </li>
    <li class="filler"></li>
</ul>

对于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;
}

请参阅jsFiddle的演示

首先，我在父容器上使用text-align: justify来均匀分布li元素，这些元素是收缩的内嵌块以适合square .icon元素。

.filler行强制新的100％宽度线，允许文本对齐工作。 我设置了vertical-align: top （和父级中的line-height: 0 ）来摆脱填充元素创建的空间孤儿。

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

一个限制是为标签指定了宽度，因此您应该根据需要向父容器添加最小宽度。

你有足够的空间来根据需要调整东西。

Answer 2

看到这个小提琴

我正在使用calc函数作为4个第一个li的宽度。

这是这样的。

第一个看起来像O------而第五个看起来像O

width: calc((100% - 44px)/4);

说明：第五个li恰好是44px，所以4个第一个li将它们之间的其余部分平分。

Answer 3

CSS：

ul{
    text-align: justify;
}

ul::after {
    content: '';
    width: 100%; 
    display: inline-block;
}

li{
    display:inline-block;
}

Answer 4

尝试：

.steps {
width:100%;
list-style-type: none;
padding:0;
margin:0 auto;
background:url(http://tnsdev.cloudapp.net/dev/steps_slice.png) repeat-x;
 }

 .steps li {
width:20%;
float:left;
left: 200px;
right: 200px;
}

.steps li .icon {
background:url(http://tnsdev.cloudapp.net/dev/steps_icon.png) no-repeat;
height:44px;
width:44px;
}

http://jsfiddle.net/HYYwn/2/

Answer 5

我喜欢这个问题！ 真正的脑筋急转弯......

这就是我所拥有的： http ： //jsfiddle.net/HYYwn/10/

我已经简化了HTML并将你的图标<div />替换为<img />因为这些更容易维持所需的平方比率。 可以使用<div />完成，但我们需要使用一些JS来使其响应。

[简体] HTML

<div class="steps">
    <ul>
        <li>
            <img  src="http://tnsdev.cloudapp.net/dev/steps_icon.png" />
        </li>
        <li>
            <img  src="http://tnsdev.cloudapp.net/dev/steps_icon.png" />
        </li>
        <li>
            <img  src="http://tnsdev.cloudapp.net/dev/steps_icon.png" />
        </li>
        <li>
            <img  src="http://tnsdev.cloudapp.net/dev/steps_icon.png" />
        </li>
        <li>
            <img  src="http://tnsdev.cloudapp.net/dev/steps_icon.png" />
        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.steps * {
    position: relative;
}
.steps {
    width: 100%;
    overflow: hidden;
    background-image: url(http://tnsdev.cloudapp.net/dev/steps_slice.png);
    background-repeat: repeat-x;
    background-position: 50%;
}
.steps ul {
    width: 119%;
    list-style-type: none;
}
.steps li {
    width: 20%;   /* 1/5 of ul.width */
    float: left;
}
.steps img {
    width: 20%;   /* 1/5 of li.width */
    height: auto; /* Always "square" */
}

注意：这里使用了一个神奇的数字...... 119％ 。 我不能告诉你为什么这样有效，但确实如此。 希望比我聪明的人可以解释该值背后的代数（请注意，如果我们更改<img />宽度，那么我们必须更改此值）。

Answer 6

我已经实现了这个目标:before并且它工作得非常好，你唯一可能担心的是last-child但是你可以将.last-child类添加到最后一个项目，它将使它跨浏览器。

演示： http ： //jsfiddle.net/F2Kh6/

CSS

li{
    float: left;
    list-style: none;
    width: 20%;
    position: relative;
}

li .icon{
    background: url('http://tnsdev.cloudapp.net/dev/steps_icon.png') no-repeat;
    width: 44px;
    height: 44px;
}

li:last-child:before{
    display: none;
}

li:before{
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: url('http://tnsdev.cloudapp.net/dev/steps_slice.png') repeat-x;
    z-index: -1;
}

所以我们只是将步骤切入:before并隐藏:before :last-child