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/

我怎样才能实现气泡之间的距离完全相同，并且步骤5的气泡位于最右边？我约束有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;
}

See demo at jsFiddle

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

.filler行强制新的100％宽度线，允许文本对齐起作用。我设置vertical-align: top（以及父项中的line-height: 0）来删除填充元素创建的空间孤儿。

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

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

这里有足够的空间来根据需要调整内容。

Answer 2

请参阅this Fiddle

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

这是这样的。

第一个看起来像O------，第五个看起来像O。

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

说明：第五个li正好需要44px，所以4个li首先将它们平均分配。{/ p>

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

均匀分配李项目

6 个答案:

[简化] HTML

CSS