php - 无法将 nav-below 定位在我的内容下方

标签 php jquery html css wordpress

不知何故，我无法将我的导航链接定位到我的内容下方的下一个博客页面。 我尝试了我能想到的一切(边距、拍打等)，但愚蠢的东西只是停留在原处——在右侧。 (这可能是某种愚蠢的初学者问题，但我就是不明白 - 抱歉!)

这里是一个链接...... My website

这是 navigation 在 index.php 中声明的方式(在循环后面):

<?php get_header(); ?>


<?php if (have_posts()) : ?>
<div id="post-area">
<?php while (have_posts()) : the_post(); 	
    
    get_template_part( 'content', get_post_format() );

    
 endwhile; ?>
    
    
</div>
<?php else : ?>
<?php endif; ?>
    
<div id="nav-below">
<div class="nav-previous"><?php next_posts_link( __( '&laquo; Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts &raquo;', 'twentyten' ) ); ?></div>
</div>    
 
<?php get_footer(); ?>

这是我的 CSS:

/*  SOVROL8028155969EE    */

/* colour styles : light  */
  body  { background: url(../images/light/bg.jpg) repeat #FFF;  font-size:12px; line-height:20px;  font-family: 'Droid Sans', sans-serif;   }
  #wrap { width:94%; margin-left:3%;}
  
/* font styles */	
  h1  { font-size:33px; line-height:35px; color:#000000; padding:0px; font-weight:bold; text-align:center;  text-transform: uppercase; padding-bottom:5px; padding-top:5px; }
  h2  { font-size:18px; line-height:23px; color:#000000; padding:0px; font-weight:bold; text-align:center;  text-transform: uppercase; padding-top:2px; }
  h3  { font-size:15px; line-height:25px; color:#858585; padding:0px; margin:0px; font-weight:normal;  }
  h4  { font-size:15px; line-height:25px; color:#000000; padding:0px; margin:0px; font-weight:normal; font-weight:bold;  } 
  h5  { font-size:13px; line-height:22px; color:#000000; padding:0px; margin:0px; font-weight:normal;  }
  h6  { font-size:12px; line-height:22px; color:#858585; padding:0px; margin:0px; font-weight:normal;  } 
  p   { font-size:12px; color:#000; line-height:19px; margin:0px; padding:0px; padding-top:0px; padding-bottom:0px; font-family:'Helvetica',Arial, Helvetica, sans-serif; }

/* list Styles */
  ul 	{ padding:0px; margin:0; margin-left:0px; font-family:'Helvetica',Arial, Helvetica, sans-serif; margin-top:10px;   }
  ul li { font-size:12px; color:#858585; padding-left:10px; margin-bottom:7px; list-style:inside; list-style-type:square;}
  ol 	{ padding:0px; margin:0; margin-left:25px; font-family:'Helvetica',Arial, Helvetica, sans-serif; margin-top:10px;   }
  ol li { font-size:12px; color:#858585; padding-left:10px; margin-bottom:7px;  list-style-type: decimal; }
  hr 	{ background:url(../images/hr.jpg) top center no-repeat; border:0; outline:0; clear:both; height:10px;}
	
/* link styles */	
  a		{color:#d11112; text-decoration: none;} 
  a:visited 	{color:#d11112; text-decoration: none;}
  a:hover 		{color:#ff96a7 ; text-decoration: none;}
  a:active 		{color:#444444; text-decoration: none;}
  a:focus 		{outline-style: none;}  	
  .moretext                 {color:#d11112; text-decoration: none;} 
  .moretext:hover   		{color:#ff96a7; text-decoration: none;}

  h1 a { color:#000000; }
  h1 a:visited { color:#000000; }
  h2 a { color:#000000; }
  h2 a:visited { color:#000000; }

/* header nav styles */ 
  header 			 { 
  width: 100%;
  height: 255px;   /* Bildhöhe  */
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #FFF;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s; }

header #logo img {
  display: block;
  max-width: 100%;
  height: auto;
}
header nav {
  display: inline-block;
  float: right;
}
header nav a {
  line-height: 105px;
  margin-left: 20px;
  color: #9fdbfc;
  font-weight: 700;
  font-size: 18px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header nav a:hover {
  color: white
}

header.smaller {
  height: 107px
}
header.smaller #logo {
  width: 180px;
  height: 127px;
}
header.smaller nav a {
  line-height: 75px
}

.header-social {
  
}

/* =Extras
---------- */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}



  #logo 			 { 
  text-align: center;  
  margin-left: auto; 
  margin-right: auto;   
  /* display: inline-block;   float: left; */
  width: 361px;
  height: 255px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

  }


  /* #nav 				 { width:100%; background:url(../images/light/bg-row.png) top left repeat-x; height:57px; overflow:hidden;   }
  #nav ul 			 {	display: inline; list-style: none;  margin:0px; padding:0px; height:42px; line-height:42px; clear:both;   }
  #nav ul li 		 { float: left;  display: inline;  font-size: 12px; margin:0px; padding:0px;   }
  #nav ul li a 		 { display:block; height:42px; margin-right:20px; text-decoration:none; margin-top:10px;  }
  #nav ul li a:hover { }
  	*/

/* footer styles */
  #footer-area 					{ width:100%; display:inline; float:left; padding-top:5px; margin-top:40px; clear:both; background:url(../images/light/bg-row.png) top left  repeat-x; }
  #footer-area .widget 			{ width:310px; margin-right:30px; padding-top:35px; display:inline; float:left; font-size:12px; color:#454545; line-height:18px; font-family:'Helvetica',Arial, Helvetica, sans-serif;  }
  #footer-area .widget h3 		{ color:#858585;}
  #footer-area .widget p    	{ color:#000;}
  #footer-area .widget ul   	{ margin-left:0px;}
  #footer-area .widget li   	{ color:#858585; }
  #footer-area .widget a 		{ color:#444444;}
  #footer-area .widget a:hover  { color:#000;}
  #footer-area .widget-copy 	{ width:280px; overflow:hidden; display:inline; float:left; margin-left:10px;} 

/* copyright styles */ 
  #copyright { clear:both; width:100%; background:url(../images/light/bg-row.png) top left repeat-x; display:inline; float:left; margin-top:15px; margin-bottom:20px; }
  #copyright p { padding-top:50px; color:#4f5356; font-size:12px; }
  #copyright a 	{color:#858585;	text-decoration: none;} 
  #copyright a:hover 	{color:#000000; text-decoration: underline;}
 
 
/* post and page styles */ 
  .type-post 				{ width:770px; background:#FFF; /*border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;*/ margin-right:10px; margin-top:15px; display:inline; float:left; position:relative;  }
  .type-page 				{ width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
  .type-attachment 			{ width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
  .gridly-category 			{  width:auto; background:#000; height:30px; overflow:hidden; left:0; margin-top:30px;}
  .gridly-category p 		{ position: absolute; margin:0; padding:0; line-height:30px; padding-left:20px; padding-right:40px; color:#fff; text-transform:uppercase;   }
  .gridly-category a 		{ color:#fff; text-transform:uppercase;}
  .gridly-category a:hover  { color:#ff96a7;}
  .gridly-copy 				{ width:710px; margin-left:auto; margin-right:auto; padding-top:20px; padding-bottom:20px; overflow:hidden }
  .gridly-date 				{ width:150px;  color:#8e8e8e; font-size:11px;}
  .size-full 				{ width:100%; height:inherit;}

  .gridly-image 			{ margin-top:7px; border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}

.gridly-image-single 			{ margin-top:7px; border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; margin-left: auto; margin-right: auto;   text-align: center; }

  .contentbox               { margin-top: 4px; height: 105px;  }

  .contentbox-single        { margin-top: 30px; }
/*  FUNKTIONIERT NICHT */
  .contentbox-single p   { font-size:12px; color:#000; line-height:20px; margin:0px; padding:4px;  font-family:'Helvetica',Arial, Helvetica, sans-serif; }

  .price 			        { margin-top: 7px; font-size:24px; color:#8e8e8e;  }
  .sparbutton               {  position:absolute; z-index:1; margin-left: 130px; margin-top: -25px;}
  .sparbutton-single        {   margin-left: auto; margin-right: auto; text-align:center; margin-bottom: 40 px; padding-top: 40px; clear:both; }

img{border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#logo 	img		 {border:0px solid #;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}


.relatedposts {margin-top: 40px; font-size: 12px; margin-left:auto; margin-right:auto; width:950px; }  

.relatedthumb {margin: 5px 2px 0 2px; float: left; }  
.relatedthumb a:hover {color:#ff96a7 ;}  


 .grenze {width:100%; background:url(../images/light/bg-row.png) top left repeat-x; display:inline; float:left; margin-top:15px; margin-bottom:20px; }




/*
aktuell                     ziel            höhe

post breite 310         post breite 320     padding top 10
   bild                     bild            padding bottom 20
   text                   300 x 250         h2  23
    250
rand 30 30              rand 10 10
*/
/* post index styles */ 
#post-area {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
    padding-top: 300px;
    padding-bottom: 4em;
}
#post-single {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 300px;
  
}

.nav-previous { padding-top: 30px;}

/*
#post-area #infinite-loader {
            position: absolute;
            bottom: 1px;
            width: 80%;
            text-align: center;
            padding-bottom: 2em;
        }
*/

  #post-area .post 				{ width:320px; background:#FFF; margin-top:10px; /* border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:10px;*/ position:relative;  }
  #post-area .post .gridly-copy 		{ width:300px; height:420px; margin-left:auto; margin-right:auto; padding-top:10px; paddingbottom:20px; overflow:hidden; clear:both;}
  #post-area .post .gridly-date 		{ width:150px;  color:#8e8e8e; font-size:11px;  border-bottom:1px dotted #cccccc; padding-bottom:0; padding-top:0; }
  #post-area .post .gridly-link 		{ width:150px; border-top:1px dotted #e8e8e8; color:#494e51;}

/* single post nav styles */ 
  .post-nav 		 { width:40px;  float:right; /*margin-left:10px; margin-top:15px; */}
  .post-next a 		 { background:url(../images/btn-left.png) top left no-repeat; height:35px; width:35px; display:inline; float:left; text-indent:-9999px; }
  .post-next a:hover { background:url(../images/btn-left.png) top right no-repeat; height:35px; width:35px;}
  .post-prev a 		 { background:url(../images/btn-right.png) top left no-repeat; height:35px; width:35px; display:inline; float:left; clear:both; text-indent:-9999px;}
  .post-prev a:hover { background:url(../images/btn-right.png) top right no-repeat; height:35px; width:35px;}

/* comment styles */
  .comments-area ol { list-style:none; margin:0; padding:0;  border-bottom:1px solid #8e8e8e; }
  .comments-area li { list-style:none; margin:0; padding:0; border-top:1px solid #8e8e8e; width:100%; clear:both; display:inline; float:left; margin-bottom:10px; padding:10px;  } 
  .avatar 			{ display:none;} 
  .reply 			{ display:none;}
  .comment-meta  	{ display:none;}
  .comment-author 	{ font-size:16px; font-weight:bold; font-family: 'Droid Sans', sans-serif; }
  #comment-form 	{ width:50%; }
  .text-input 		{ clear:both; border:1px solid #8e8e8e; margin-bottom:5px; width:90%; padding:7px; font-family:Arial, Helvetica, sans-serif; color:#555; font-size:12px;  }
  .comment-input  	{ clear:both; border:1px solid #8e8e8e; margin-bottom:5px; width:90%; padding:7px; font-family:Arial, Helvetica, sans-serif; color:#555; font-size:12px;  } 
  .comment-submit 	{ clear:both; width:120px; height:30px; line-height:25px; background:#e5e5e5; border:1px solid #8e8e8e;   }

/* Additional and WordPress styles */
  .clear 			{ clear:both;}
  .aligncenter	 	{ display: block; margin: 0 auto; }
  .alignleft		{ float: left; margin-right:20px; margin-top:20px; margin-bottom:10px; }
  .alignright		{ float: right; margin: 0 0 20px 20px; }
  .wp-caption		{  text-align: left; margin-top:5px; margin-bottom:5px; }
  .wp-caption-text  { margin-top:2px;  text-align:left; font-style:italic;  font-size:11px; color:#999; } 
  .sticky    		{}
  .gallery-caption  {} 
  .bypostauthor  	{}
  blockquote 		{ font-size:2em; line-height:23px; color:#000; margin-left:20px; border-left: 1px dotted #999; padding-left:25px; margin-top:15px; margin-bottom:15px; }
/* end of css file */

非常感谢 - 我非常感谢任何帮助。

最佳答案

这是一个 CSS 问题，有很多方法可以解决这个问题。

将它放在您的样式表中，这将解决您的问题。

#nav-below {
  clear: both;
}

我认为最好的方法是在父级的 float div 上使用 clearfix。

一些链接给你，以防你想了解更多:

Know how float works

Clearfix

ps:抱歉英语不好。

关于php - 无法将 nav-below 定位在我的内容下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26609731/

上一篇：javascript - Bootstrap 3 : Firefox bug - Cannot set div height

下一篇：css - 为其他浏览器在 css 中制作白色删除线

相关文章：

html - 当我尝试验证文件时，CSS 格式设置出错

html - 如何使用 Node.JS 通过 XMPP 发送 HTML 格式的消息？

jquery - CSS 翻转卡 - Chrome 中的错误

php - 如何从我的 mysql 表中删除特定行？

javascript - 关于 Angularjs OrderBy 与数字的想法？ 10 被视为小于 2

javascript - 如何在 jquery 中 td 为 0 时隐藏 tr 项目？

javascript - 防止应用最后一个 child 的样式

php - 如何使菜单和子菜单动态 Laravel

php - 使用 NAS Synology 每天运行一次 php 页面

javascript - 用 jQuery 替换智能文本

©2024 IT工具网  联系我们