我有很多小部分通过php生成。它们的大小不同。我想要底部有一个文字按钮，它会占据整个宽度。
我先是有 显示：块; 向左飘浮;
但是在左边很多，我接着尝试了： display：inline-block
但它太小了，两边都有额外的空间。 Here是带有额外空间的屏幕截图。有什么建议？我正在处理立即购买按钮。
PHP生成代码 全球$ wpdb; $ cat = $ _POST ['cat']; 如果（$猫== '所有'） { $ items = $ wpdb-＆gt; get_results（'SELECT * FROM'。$ wpdb-＆gt; prefix.'afp_items ORDER BY item_id ASC'）; }其他 { $ items = $ wpdb-＆gt; get_results（'SELECT * FROM'。$ wpdb-＆gt; prefix.'afp_items WHERE item_category =“'。$ cat。'”ORDER BY item_id ASC'）; } $输出= '';
$k = 1;
foreach ($items as $item ){
$output.='<div class="afp-single-item">
<img alt="" class="img-link-initial" src="' . $item->item_thumbnail . '">
<div class="item-overlay" style="display: none;">
<img src="' . $item->item_thumbnail . '" width="101%">
<div class="wishlist-details">';
if($item->item_title != null) { $output.='<h2>' . $item->item_title . '</h2>'; }
$output.='
<span>Share This</span>
</div>
';
if($item->item_link != null) { $output.='<a target="_blank" class="buynow" href="' . $item->item_link . '">Buy Now</a>
'; }
$output.='
</div>
</div>';
$k++;
}
$output.='</div><div class="afp-clear"></div>';
echo $output;
模板代码：
<?php
/**
* Template Name: Shop Page Template
*
*/
get_header(); ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=54330784694";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<link rel='stylesheet' type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/isotop.css" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.isotope.js" type="text/javascript"></script>
<div id="show_wrap">
<div class="section-header" >
<h2>SHOP</h2>
</div>
<?php
global $wpdb;
//Get The Plugin Options
$afpOptions = get_option('afpOptions');
//SQL Queries
switch( $afpOptions['sort_items'] ){
case 'title':
$orderby = 'item_title ASC';
break;
case 'date':
$orderby = 'item_date DESC';
break;
case 'client':
$orderby = 'item_title ASC';
break;
case 'id':
$orderby = 'item_id ASC';
break;
}
$items = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_items ORDER BY ' . $orderby);
if( $afpOptions['sort_cat'] == 'on' ){
$orderby = ' ORDER BY cat_name';
} else {
$orderby = '';
}
$cats = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_categories' . $orderby);
?>
<div class="clear"></div>
<div class="portfolioFilter">
<?php
//AFP Main Container
echo '<a href="#" data-filter="*" class="current">All</a>';
foreach ( $cats as $cat ){
echo '<a href="#" data-filter=".' . ereg_replace("[^A-Za-z0-9]", "", $cat->cat_name) . '">' . $cat->cat_name . '</a>';
}
?>
</div>
<div class="portfolioContainer" style="padding-bottom:250px;">
<?php foreach ($items as $item ){ ?>
<div class="<?php echo ereg_replace("[^A-Za-z0-9]", "", $item->item_category); ?>">
<img alt="" class="img-link-initial" src="<?php echo $item->item_thumbnail; ?>">
<div class="item-overlay" style="display: none;">
<img src="<?php echo $item->item_thumbnail; ?>" width="101%">
<div class="wishlist-details">
<?php if($item->item_title != null) {?>
<h2><?php echo $item->item_title; ?></h2>
<?php } ?>
<p class="share_this">Share This</p>
<div class="shop_bottom_border_0ld"> </div>
<p class="social_share_box">
<div class="share_icon_only fleft"><div class="fb-share-button" data-href="<?php echo $item->item_link; ?>" data-type="button"></div></div>
<div class="share_icon_only fleft"><a target="_blank" href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $item->item_link; ?>" data-count="none">Tweet</a></div>
<div class="share_icon_only fleft" style="width:40px;">
<a target="_blank" href="http://www.pinterest.com/pin/create/button/?url='<?php echo $item->item_link;?>&media=<?php echo $item->item_thumbnail; ?>&description=<?php echo $item->item_title; ?>"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
</div>
<div class="clear"></div>
</p><br />
<?php if($item->item_link != null) { ?>
<p><a target="_blank" class="buynow" href="<?php echo $item->item_link; ?>">Buy Now</a></p>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="afp-clear clear20"></div>
</div>
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
<?php get_footer(); ?>
和CSS
.buynow {
background-color: #F5D2D5;
color: #FFFFFF;
display: block;
float: left;
font-size: 12px;
font-weight: 400;
height: 42px;
letter-spacing: 0.3em;
line-height: 42px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 230px;
}
.shop_bottom_border{
border-bottom:1px solid #CCC;
margin-bottom:5px;
}