第二节元素移动到第二行

我有两个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

第二节元素移动到第二行

回答

相关问题