html - 无法让 ul 跨列

Question

我在列的 div 中有一个 ul。我无法让 ul 跨越列。我尝试使用 column-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%
}