我在列的div中有个ul。我很难让ul跨列。我试过使用列span: all;和宽度: 100%;但是似乎什么都没有用。下面是一个截图,我正在努力实现,它看起来是什么样子。下面也是与它相关的代码。任何帮助都会很好!
我所要达到的目标是:

目前的情况如下:

HTML:(我给了第二个li一个类,因为它需要比上面的图片中的其他两个更宽)
<div class="news-events group">
  <div class="col1">
    <h1>News & Press Releases</h1>
    <?php query_posts('post_type=issues&posts_per_page=4'); ?>
    <?php $i = 1; ?>
    <?php while (have_posts()) : the_post(); ?>
      <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full_size' );
      $url = $thumb['0']; ?>
      <div class="post-container container-<?php echo $i; ?>" style="background-image:url('<?=$url?>');">
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
        <a href="<?php the_permalink(); ?>">Read More ></a>
      </div>
      <?php $i++ ?>
    <?php endwhile; wp_reset_query(); ?>
    <div class="navigation">
      <ul>
        <li>View All</li>
        <li class="gi">Get Involved</li>
        <li>Next Page</li>
      </ul>
    </div>
  </div>CSS:
.news-events {
  background-image: url('images/front-page-bg.jpg');
  padding: 25px 75px;
}
.news-events .col1 {
  width: 60%;
  float: left;
}
.news-events .col1 h1 {
  color: white;
}
.news-events .col1 .post-container {
  background-size: cover;
  background-position: center;
  border: 1px solid white;
  border-radius: 3px;
  padding-bottom: 15px;
  padding-left: 20px;
  margin-bottom: 25px;
}
.news-events .col1 .post-container h2 {
  font-weight: 400;
  margin-bottom: 3px;
}
.news-events .col1 .post-container p {
  font-size: 1.1em;
  margin-top: 2px;
  margin-bottom: 10px;
  font-family: Verdana;
  width: 75%;
}
.news-events .col1 .post-container a {
  color: black;
}
.news-events .col1 .container-2, .news-events .col1 .container-4 {
  color: white;
}
.news-events .col1 .container-2 a, .news-events .col1 .container-4 a {
  color: white;
}
.news-events .col1 .navigation {
  color: white;
  font-family: Verdana;
  column-span: all;
}
.news-events .col1 .navigation ul {
  list-style-type: none;
  width: 100%;
}
.news-events .col1 .navigation ul li {
  padding: 15px 35px;
  border: 1px solid white;
  display: inline-block;
  text-align: center;
  margin-right: -7px;
  font-weight: 400;
  font-size: 1.1em;
}
.news-events .col1 .navigation ul .gi {
}发布于 2015-11-24 19:39:51
只需将此添加到代码中即可。
.news-events .col1 .navigation ul li {
    width:25%
}
.news-events .col1 .navigation ul li.gi {
    width:50%
}编辑:或者将li中的类移除到代码中
.news-events .col1 .navigation ul li {
    width:25%
}
.news-events .col1 .navigation ul li:nth-child(2) {
    width:50%
}https://stackoverflow.com/questions/33902227
复制相似问题