我目前正在尝试将填充添加到此容器的标题中,由于某种原因,它不允许我向左或向右添加任何填充。下图显示了目前的样子
这是我的代码:
<?php
$feed = 'http://miletich2.blogspot.co.uk/feed/';
$rss = fetch_feed($feed);
?>
<div class="container">
<div class="clear">
<div class="right">
<div class="rss-container">
<div class="rss-heading">
<?php
$title = "Clashing With Life";
$description = 'This is a blog written by an autistic person for other autistic people about <br>some of the biggest issues in life, whether deplorable or marvelous.';
echo '<h3 class="text-center title">' . $title . '</h3>';
echo '<p class="text-center">' . $description . '</p>';
?>
</div>
<?php
if ( !is_wp_error($rss) ) :
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
if ($rss_items):
foreach ($rss_items as $item) :
$item_title = esc_attr( $item->get_title() );
$item_permalink = esc_url( $item->get_permalink() );
$item_post_date = $item->get_date( get_option('date_format') );
$item_excerpt = wp_trim_words( wp_strip_all_tags( $item->get_description(), true ), 50 );
echo sprintf('<div class="spacing"><a href="%s" target="_blank">%s</a><div class="pull-right">%s</div><p>%s</p><hr></div>', $item_permalink, $item_title, $item_post_date, $item_excerpt);
endforeach;
endif;
endif;
?>
这是我的css:
.right{
float:right;
}
.rss-container{
max-width: 400px;
width: 100%;
margin: 25px auto;
background: #f4f4f4;
padding: 0 20px 0 20px;
}
.rss-heading {
background: #7ED321;
color: #000;
padding: 15px 30px;
border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
font-weight: bold;
}
.rss-heading p{
font-size:9px;
}
hr{
border-top: 1px solid #DCDCDC !important;
}
.article-head{
line-height: 2em;
font-family: Roboto Condensed;
font-weight: bold;
}
.clear{
clear:both;
}
.spacing a {
line-height: 2em;
font-size: 15px;
}
.pull-right{
line-height: 2em;
font-size: 15px;
}
h3.title {
font-family: Roboto Condensed !important;
font-weight: bold;
}
in。rss-container
我添加了这个:padding: 0 20px 0 20px;
和.rss-heading padding: 15px 30px;
我试图将30px更改为另一个值,因为我只是想让它左右改变并继续改变顶部和底部。任何帮助将不胜感激!
答案 0 :(得分:0)
要仅更改左右填充值,则无法使用“填充”快捷方式。明确指定:
padding-right: 30px;
padding-left: 30px;
这将使顶部和底部保持不变。