抱歉我的英文不好
我有这个代码php
我想在代码中添加css
<?php
$post_objects = get_field('awncn');
if( $post_objects ): ?>
<ul>
<?php foreach( $post_objects as $post): ?>
<?php setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>
<h1><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h1>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif;
?>
我想要这么漂亮的形状 http://prntscr.com/aqf4ht
答案 0 :(得分:0)
你必须稍微重新排列你的标记才能使它具有风格,但除此之外看起来很简单:
(稍加修改)的html标记:
<div class="awncn">
<ul>
<li>
<figure>
<img width="150" height="150"
src="http://i1.wp.com/drama-online.tv/wp-content/uploads/2016/03/Screenshot_9.png?resize=150%2C150"
class="attachment-thumbnail size-thumbnail wp-post-image"
alt="Screenshot_9">
<figcaption>
<a href="http://drama-online.tv/dramanews/23232323/">23232323</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img width="150" height="150"
src="http://i2.wp.com/drama-online.tv/wp-content/uploads/2016/03/21006-207x272.jpg?resize=150%2C150"
class="attachment-thumbnail size-thumbnail wp-post-image"
alt="21006-207x272">
<figcaption>
<a href="http://drama-online.tv/dramanews/thrthtrhrthrthtrh/">thrthtrhrthrthtrh</a>
</figcaption>
</figure>
</li>
</ul>
</div>
css样式规则:
li {
display: inline-block;
}
figure {
margin: 5px;
border: 1px solid lightgray;
}
figure figcaption {
width: 100%;
background-color: lightgray;
text-align: center;
padding: 5px 0;
}
figure figcaption a {
color: whitesmoke;
font-weight: bold;
text-decoration: none;
}
以下是您发布的小提琴手的修改后的变体:
https://jsfiddle.net/ssq0fu9p/2/