如何在CSS中移动列内容？

Question

我正在一个网站上，希望将文本移到CSS的左侧底部。 下面是我想做的截图。

如上面的屏幕截图所示，我想将“ 爆发”文本移到左侧底部（ 在字符 O下方对齐）。 上面的屏幕截图显示在此链接中。

我也为上面的链接创建了小提琴。

小提琴中使用的HTML代码是通过以下php代码生成的：

<ul id="shows-list" class="shows-list cf js-list-active">
    <?php foreach ( $alpha_programs as $title => $permalink ) :
        $title_char = substr( $title, 0, 1 ); ?>
        <li class="shows-list__letter">
        <?php
        if ( $title_char !== $prev_title_char ) : $prev_title_char = $title_char; ?>
            <h1 class="shows-list__letter-title"><?php echo esc_html( $title_char ) ?></h1>
        <?php endif;?>
            <a class="shows-list__link" href="<?php echo esc_url( $permalink ); ?>"><h2 class="shows-list__title"><?php echo esc_html( $title ); ?></h2>
            </a>
        </li>
    <?php
    endforeach;
    ?>
</ul>

问题陈述：

我想知道我需要在上面的php代码中或在小提琴中的CSS代码中进行哪些更改，以便使突出显示的文本向左侧底部移动

Answer 1

我建议您尝试使用flexbox，也许它可以像这样工作：

ul #shows-list {
   display: flex;
   flex-direction: column;
 }

也许您想添加：

justify-content: center;

彼此之间处于li使li居中的属性。

Answer 2

最简单的方法。

 <body> <table> <tr>your content</tr> <tr>your content</tr> </table> </body>

Answer 3

我已经检查了您的代码，看来您在这里有点错误：

<ul id="shows-list" class="shows-list cf js-list-active">
 <li class="shows-list__letter">
  <h1 class="shows-list__letter-title">B</h1>
  <a class="shows-list__link" href="http://www.cpac.ca/en/programs/beyond-politics/"><h2 class="shows-list__title">Beyond Politics</h2></a>
 </li>
 <li class="shows-list__letter">
  <a class="shows-list__link" href="http://www.cpac.ca/en/programs/british-prime-ministers-question-time/"><h2 class="shows-list__title">British Prime Minister’s Question Time</h2></a>
 </li>
 <li class="shows-list__letter">
  <a class="shows-list__link" href="http://www.cpac.ca/en/programs/builders-of-canada/"><h2 class="shows-list__title">Builders of Canada</h2></a>
 </li>
</ul>

链接列表与字母在同一列表中。 您应该为字母列表内的链接创建一个新列表。 像这样：

<ul id="shows-list" class="shows-list cf js-list-active">
 <li class="shows-list__letter">
  <h1 class="shows-list__letter-title">B</h1>
  <ul class="shows-list__letter_list">
   <li class="shows-list__letter_inside">
    <a class="shows-list__link" href="http://www.cpac.ca/en/programs/beyond-politics/"><h2 class="shows-list__title">Beyond Politics</h2></a>
   </li>
   <li class="shows-list__letter_inside">
    <a class="shows-list__link" href="http://www.cpac.ca/en/programs/british-prime-ministers-question-time/"><h2 class="shows-list__title">British Prime Minister’s Question Time</h2></a>
   </li>
   <li class="shows-list__letter_inside">
    <a class="shows-list__link" href="http://www.cpac.ca/en/programs/builders-of-canada/"><h2 class="shows-list__title">Builders of Canada</h2></a>
   </li>
  </ul>
 </li>
</ul>

我所做的是，将字母的所有链接放在字母列表内的新列表标签中。 对不起，我的英语不好。 您可以检查此小提琴以更好地理解。

如何在CSS中移动列内容？

问题描述

3 个解决方案

解决方案1
0 2019-02-11 23:04:28

解决方案2
0 2019-02-12 02:50:42

解决方案3
0 2019-02-12 05:52:52

如何在CSS中移动列内容？

问题描述

3 个解决方案

解决方案1 0 2019-02-11 23:04:28

解决方案2 0 2019-02-12 02:50:42

解决方案3 0 2019-02-12 05:52:52

解决方案1
0 2019-02-11 23:04:28

解决方案2
0 2019-02-12 02:50:42

解决方案3
0 2019-02-12 05:52:52