Question

我目前正在编写一个Wordpress网站。我有一个侧边栏和我的博客帖子的主体。侧栏目前具有以下属性：

.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}

和博客文章的主体：

body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}

.post {
padding-left:10px;  
border-left:thin solid #000000;
}

我目前正在尝试向.post添加padding-left，以便侧边栏的右边框与博客帖子之间存在间隙。但是，由于某种原因，这不起作用（没有创建间隙）。也不是边框左边（没有创建边框;我尝试删除侧边栏上的右边边框属性）。

目前这是index.php的代码

   <div id="blog">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
    <div class = "sidebar">    
        <?php get_sidebar(); ?>
    </div>
    <div class="post">
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <div class="entry">
            <?php the_post_thumbnail(); ?>
            <?php the_content(); ?>

            <p class="postmetadata">
            <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
            <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
            </p>

        </div>
    </div>

如何为主要博文发布填充左侧和左侧边框？

谢谢！

Answer 1

填充在元素中应用，因此边框位于填充的其他侧。你需要的是保证金，它是在元素之外应用的：

.post {
    margin-left:10px;  
    border-left:thin solid #000000;
}

Here is an article更详细地解释填充和边距。

Answer 2

这听起来像是默认的Wordpress CSS和你的主题CSS文件之间的冲突。快速入侵是将!important添加到CSS声明的末尾，如下所示：

.post {
  padding-left: 10px !important;  
  border-left: thin solid #000000 !important;
}

长期解决方案是检查加载的CSS文件（以及以何种顺序加载）以及正在使用的选择器。优秀的资源：http://codex.wordpress.org/CSS_Troubleshooting

CSS - 为什么Border不工作？

2 个答案: