第二節元素移動到第二行

我有兩個section元素，如<section class="first"></section><section class="rightarrow"></section>。在第一節元素中我有菜單，第二節中有一個箭頭指向右側。此箭頭放置在第一個節元素的右上角，並且第一個節元素顯示也設置爲none。當我點擊箭頭時，菜單出現並向右側滑動（可以工作），但問題是當第一部分是元素時，顯示器設置爲阻止，然後箭頭進入下一行。第二節元素移動到第二行

有人可以給我舉一些例子，我該如何保持箭頭在第一個元素的右側？

這裏是我的CSS

.first { 
position: relative; 
border-right: 1px solid #666; 
display: none; 
left: -370px; 
float: left; 
} 

.rightarrow { 
float: left; 
display: inline-block; 
position: relative; 
margin-right: 1%; 
margin-top: 2%; 
figure { 
    width: 31px; height: 80px; 
    background: url(../../images/rightarrow.png) no-repeat; 
    cursor: pointer; 
    //left: 0; 
} 
}

這裏是我的html

<section class="column three first"> 
     <section class="row top topfirst"> 
      <span class="user">Helsinki, Suomi</span> 
      <span class="comments user">Vaihda sijaintia</span> 
      <section class="clear"></section> 
     </section> 
     <section class="row top topsecond"> 
      <figure> 
       <img src="assets/images/user.png" /> 
      </figure> 
      <span class="user">Matti Meikalainen</span> 
      <span class="comments user">Kirjaudu ulos</span> 
      <p><input type="text" class="searchbox" placeholder="Hae" /></p> 
     </section> 
     <section class="row topthird"> 
      Etusivu 
     </section> 
     <nav class="row accordion"> 
      <ul class="menu"> 
       <li> 
        <a href="#">Uutiset</a> 
        <figure class="down"></figure> 
        <section class="clear"></section> 
        <ul class="inside"> 
         <li><a href="">Fringilla Condimentum</a></li> 
         <li><a href="">Lorem</a></li> 
         <li><a href="">Fringillau</a></li> 
         <li><a href="">Curabitur</a></li> 
         <li><a href="">Mollis</a></li> 
         <li><a href="">Ipsum</a></li> 
         <li><a href="">Lorem</a></li> 
         <li><a href="">Fringillau</a></li> 
         <li><a href="">Curabitur</a></li> 
         <li><a href="">Mollis</a></li> 
         <li><a href="">Ipsum</a></li> 
        </ul> 
       </li> 
       <li><a href="">Foorumi</a></li> 
       <li><a href="">Kauppa</a></li> 
       <li><a href="">Messut</a></li> 
       <li> 
        <a href="">Asiakaspalvelu</a> 
        <figure class="down"></figure> 
        <ul class="inside"> 
         <li><a href="">Tilaa lehti</a></li> 
         <li><a href="">Muutos tilaukseen</a></li> 
         <li><a href="">Lähetä uutisvinkki</a></li> 
         <li><a href="">Anna palautetta</a></li> 
        </ul> 
       </li> 
       <li><a href="">Nakoislehti</a></li> 
       <li><a href="">Nae meidat</a></li> 
      </ul> 
     </nav> 
    </section> 
    <section class="rightarrow"> 
     <figure> 
     </figure> 
    </section>

，這裏是我的js

$('.rightarrow').on('click', function() { 

    $('.rightarrow').animate({'margin-left': '366px'}, 1000); 
    /* 
    $('.first').animate({'left': '0px'}, 100, function() { 

    });*/ 
    $('.second').animate({'margin-left': '10px'}, 1000, function() { 

    }); 

    $('.first').css('display', 'block').animate({'left': '0px'}, 1000); 
    });

來源

2012-08-27 2619

你有沒有考慮過使用絕對位置和正Z指數？根據鏈接中的佈局來判斷，在我看來這可能更合適... – Chris

display: block表示「除我以外沒有在同一行」，所以你不能使用它。

將箭頭元素創建爲.first（即DIV內部）的子元素。而不是完全隱藏它，只顯示最右邊的部分（其中包含箭頭）。點擊按鈕後，可以將元素移動到視圖中。

來源

2012-08-27 11:29:19

任何其他解決方案？ – 2619

更改您的

$('.rightarrow').animate({'margin-left': '366px'}, 1000);

到

$('.rightarrow').css({'margin-left': '366px','position':'absolute','top':'20px';});

將幫助你實現你的目標是什麼。

來源

2012-08-27 12:20:08

第二節元素移動到第二行

回答

相關問題