CSS - Почему Border не работает? - PullRequest
Новая
       45

CSS - Почему Border не работает?

1 голос
/ 10 декабря 2011

Я в настоящее время кодирую сайт 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-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 для основных сообщений в блоге?

Спасибо!

Ответы [ 2 ]

1 голос
/ 10 декабря 2011

Заполнение применяется внутри элемента, поэтому граница находится на другой стороне заполнения. Вам нужен запас, который применяется вне элемента: 

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

Вот статья , более подробно объясняющая отступы и поля.

0 голосов
/ 10 декабря 2011

Это звучит как конфликт между стандартным Wordpress CSS и вашими CSS-файлами тем. Быстрый способ - добавить !important в конец декларации CSS следующим образом: 

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

Долгосрочным решением является проверка того, какие файлы CSS загружены (и в каком порядке) и какие селекторы используются. Отличный ресурс: http://codex.wordpress.org/CSS_Troubleshooting

...