Не работает inline-block в шаблоне WP

[Troll13]

Добрый день!

Уже пошел третий день, не могу решить простой вопрос.) Почему не работает inline-block в выводе списка постов ( нужно вывести миниатюры с подписями в ряд по 3 штуки). Вывод постов работает, только они выводятся вертикально, в столбик. Почему не понятно..

Код html работает

<ul class="goddies">


</ul>
.goddies {
font: 14px Verdana, Geneva, sans-serif;
margin:30px 10px;
padding:0;
list-style: none;
width:100%;
height:100%;
overflow:hidden;
  -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
		  box-sizing: border-box;
}

.goddies li {
display:inline-block;
width: 45% !important;
float:none !important;
min-width:5em;
opacity: 1;
margin-right:4%;
margin-bottom: 4%;
}

Видимо, я что-то не так пишу в category.php. Но никак не пойму, что.. Заранее благодарю!

<?php get_header(); ?>

	    <div id="leftcontent">
		 <p class="slovo">I am Roshan, a UI / Web designer with combined experience of 7 + years in Web Design and Graphic Design. I love designing websites.I am Roshan, a UI / Web designer with combined experience of 7 + years in Web Design and Graphic Design. I love designing websites.</p>
<?php if(have_posts()): ?>
		    <?php while(have_posts()): the_post(); ?>
<ul class="goddies">
<li><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>"><img class="buttonmore" src="<?php bloginfo('template_url'); ?>/images/viewmorebtn.gif" alt="" /></a></li>
</ul>
		    <?php endwhile; ?>
		    <?php endif; ?>
</div>

<?php get_sidebar(); ?>

<div class="clear"></div>
</section>
</div>

<?php get_footer(); ?>

[hedgehog]

Во-первых, в этом случае width = 100% + 20px:

margin:30px 10px;
width:100%;

Во-вторых, проверяйте дебагером. Я вижу две возможные причины:

1. При width=45%, margin=4% и/или min-width=4em до определенных размеров два элемента в сумме образуют > 100% ширины родителя, поэтому происходит перенос на следующую строку (следует помнить, что если между <li> будету пробелы или переносы строк, то между ними будет отображаться пробел, так как inline-block). Не лучше ли для этих целей использовать float?
   
2. Где-то перекрываются стили.
   

[Troll13]

Ура! форум заработал и наконец, можно написать сообщение hedgehog большое спасибо за подсказку! с float все нормально заработало!

Edited March 6, 2013 by Troll13