首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >不能让ul跨列

不能让ul跨列
EN

Stack Overflow用户
提问于 2015-11-24 19:32:46
回答 1查看 29关注 0票数 0

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

我所要达到的目标是:

目前的情况如下:

HTML:(我给了第二个li一个类,因为它需要比上面的图片中的其他两个更宽)

代码语言:javascript
运行
复制
<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:

代码语言:javascript
运行
复制
.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 {
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-24 19:39:51

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

代码语言:javascript
运行
复制
.news-events .col1 .navigation ul li {
    width:25%
}
.news-events .col1 .navigation ul li.gi {
    width:50%
}

编辑:或者将li中的类移除到代码中

代码语言:javascript
运行
复制
.news-events .col1 .navigation ul li {
    width:25%
}
.news-events .col1 .navigation ul li:nth-child(2) {
    width:50%
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33902227

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档