不能让ul跨列

Question

我在列的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 {
}

Answer 1

只需将此添加到代码中即可。

.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%
}