11

希望这是不言自明的：

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--
4

6 回答 6

7

这是使用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内联块的元素，这些元素会缩小以适合方形.icon元素。

该.filler线强制使用新的 100% 宽度线，以允许 text-justify 工作。我设置vertical-align: top（和line-height: 0在父项中）以摆脱由填充元素创建的具有空间的孤儿。

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

一个限制是为标签指定了宽度，因此您应该在您认为合适的情况下向父容器添加一个最小宽度。

您在这里有足够的空间来根据需要进行调整。

于 2013-09-13T14:25:43.063 回答
2

看到这个小提琴

我正在使用该函数来获取 4 first scalc的宽度。li

这是这样工作的。

第 4 个看起来像O------，第 5 个看起来像O。

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

解释：第五个li恰好占用 44px，所以前 4 个li将其余部分平分。

于 2013-09-13T13:59:01.487 回答
1

CSS：

ul{
    text-align: justify;
}

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

li{
    display:inline-block;
}
于 2016-02-14T03:01:34.197 回答
0

尝试：

.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/

于 2013-09-13T13:27:37.373 回答
0

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

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

我已经简化了 HTML 并将您的图标换成<div />了<img />s，因为这些更容易保持所需的平方比。可以用 a 来完成，<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 />宽度，那么我们必须改变这个值）。

于 2013-09-13T14:25:07.313 回答
0

我已经实现了这一点，: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

于 2013-09-13T14:38:27.967 回答