Flexslider prev/next導航出現在wordpress的圖片下面

Question

我跟着這篇文章啓用flexsliderhttps：//code.tutsplus.com/tutorials/adding-a-responsive-jquery-slider-to-your-wordpress-theme-- wp-27914

我發現他們使用font-awesome而不是圖像進行導航，並正確地將其整理出來。

但是，prev/next導航沒有顯示在他們的位置。我相信這與css有關。

有人可以指導我如何解決這個問題嗎？

我改變了這些類 left:10px和right:10px到left:1px和right:1px之後出現並排導航。

.flexslider:hover .flex-direction-nav .flex-prev { 
    opacity: 0.7; 
    left: 1px; 
} 

.flexslider:hover .flex-direction-nav .flex-next { 
    opacity: 0.7; 
    right: 1px; 
} 

爲什麼會出現這種問題，並且可以在css中進行修復？

圖像滑塊HTML

<div class="flexslider"> 
       <ul class="slides"> 

        <?php 
        // The Loop 
        while ($the_query->have_posts()) : $the_query->the_post(); ?> 
         <li> 

         <?php // Check if there's a Slide URL given and if so let's a link to it 
         if (get_post_meta(get_the_id(), 'wptuts_slideurl', true) != '') { ?> 
          <a href="<?php echo esc_url(get_post_meta(get_the_id(), 'wptuts_slideurl', true)); ?>"> 
         <?php } 

         // The Slide's Image 
         echo the_post_thumbnail(); 

         // Close off the Slide's Link if there is one 
         if (get_post_meta(get_the_id(), 'wptuts_slideurl', true) != '') { ?> 
          </a> 
         <?php } ?> 

         </li> 
        <?php endwhile; ?> 

       </ul><!-- .slides --> 
      </div><!-- .flexslider --> 

Answer 1

有用於得到安寧一個確切的答案太多錯過的信息，因爲只有兩個導航按鈕的CSS，但我猜它可能有一些做父母position:（或大小屬性）屬性或類似的東西。