不知何故,我无法将导航链接定位到我的内容下面的下一个博客页面。 我尝试了所有我能想到的(边缘,拍拍等)但是愚蠢的东西只是保持原样 - 在右侧。 (这可能是某种愚蠢的初学者问题,但我只是没有得到它 - 抱歉!)
以下是链接至.... My website
这是 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( __( '« Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts »', 'twentyten' ) ); ?></div>
</div>
<?php get_footer(); ?>
&#13;
这是我的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 */
&#13;
非常感谢你 - 我真的很感激任何帮助。
答案 0 :(得分:1)
这是一个CSS问题,有很多方法可以解决这个问题。
将它放在样式表上,这将解决您的问题。
#nav-below {
clear: both;
}
我认为最好的方法是在父级的浮动div上使用clearfix。
为您提供一些链接,以防您想知道更多信息:
ps:抱歉英语不好。