2

私が問題を抱えていることを示すために、簡単なjsFiddleを作成しました。

jsフィドル

JavaScript (主にMultipart Form - jQueryから)

$('.step1').siblings('ul').hide(); // hide all except step 1

$('.continue').click(function(){
    $(this).closest('.step').hide("slide", direction:"left"},1500).parent().next('.step').show("slide",{direction:"right"},1500);
    return false;
});

$('.back').click(function(){
    $(this).closest('.step').slideUp().prev('.step').slideDown();
    return false;   
});

HTML

Non-Floater
<form class="a">
   <ul class="step step1">
      <li>item</li>
      <li>item</li>
      <li>
         <button class="continue">Continue</button>
      </li>
   </ul>

   <ul class="step step2">
      <li>item</li>
      <li>item</li>
      <li>
        <button class="back">Back</button>
        <button class="continue">Continue</button>
      </li>
   </ul>
</form>

Floater
<form class="floater">
   <ul class="step step1">
      <li>item</li>
      <li>item</li>
      <li>
         <button class="continue">Continue</button>
      </li>
   </ul>

   <ul class="step step2">
      <li>item</li>
      <li>item</li>
      <li>
         <button class="back">Back</button>
         <button class="continue">Continue</button>
      </li>
   </ul>
</form>

CSS

ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.floater ul {
   width: 30%;
   float: left;
}

[続行] をクリックすると、2 番目の UL が表示されますが、現在の UL の下にオフセットされています。理想的には、これは最初の UL の右側に直接入ります。

「float:left; width:30%」を追加すると役立ちますが、それでもジャンプします。(jsFiddle の 2 つ目)

表示：インラインも奇妙さを引き起こすようです...

これを達成する方法はありますか？

4

2 に答える 2

0

これをcssに追加してみてください：

.step2 {
    position: absolute;
    top: 10px;
}
于 2013-02-28T08:03:40.530 に答える