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

を使用して行う方法の 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.icon

この.filler行は、テキストの両端揃えを機能させる新しい 100% 幅の行を強制します。vertical-align: top(および親で)を設定しline-height: 0て、フィラー要素によって作成されたスペースで孤立した要素を取り除きます。

次に、絶対配置を使用してフローからラベルを取り出し、最初と最後のリスト項目のテキスト配置を調整し、負のマージンを使用してラベルを中央に配置します。

1 つの制限は、ラベルの幅が指定されていることです。そのため、適切と思われる最小幅を親コンテナーに追加する必要があります。

ここには、必要に応じて調整するための十分なスペースがあります。

于 2013-09-13T14:25:43.063 に答える
2

このフィドルを参照してください

calc最初の 4 つの s の幅の関数を使用していますli。

これはこのように動作しています。

最初の 4 つは のようにO------なり、5 番目は のようになりますO。

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

説明: 5 番目liは正確に 44px を取るため、最初の 4 つliの s は残りを均等に分割します。

于 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 に置き換えました。これは、必要な正方形の比率を維持しやすいためです。で実行できますが、<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 に答える