CSS - 为什么边框不起作用？答案

【问题标题】：CSS - Why is Border not Working?CSS - 为什么边框不起作用？
【发布时间】：2012-01-17 05:25:36
【问题描述】：

我目前正在编写一个 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;
}

我目前正在尝试将 padding-left 添加到 .post 以便在侧边栏的右边框和博客文章之间存在间隙。但是，由于某种原因，这不起作用（没有创建间隙）。 border-left 也没有（没有创建边框；我尝试删除侧边栏上的border-right 属性）。

这是当前 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>

如何使主博客帖子的 padding-left 和 border-left 工作？

谢谢！

【问题讨论】：

您能否提供一个链接指向它的使用位置，以便我们更好地分析它所在的环境？
我仍在 XAMPP 中进行本地开发.....也许我可以在此处发送/发布文件以便您查看它们？如果是的话，你想要什么文件？

标签： css wordpress border padding

【解决方案1】：

填充应用于元素内，因此边框位于填充的 other 侧。你需要的是margin，它应用在元素之外：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我尝试添加 !important 并且无法正常工作（它给我的结果与没有 !important 完全相同）...您有其他解决方案吗？
如果您链接到该站点会更容易。真正分辨的唯一方法是查看整个网站。
我仍在 XAMPP 中进行本地开发.....也许我可以在此处发送/发布文件以便您查看它们？如果是的话，你想要什么文件？