css - 基础框架上的选项卡问题

Question

我在 wordpress 主题的基础上遇到选项卡问题......原始代码有 4 个水平选项卡，我需要添加第五个元素......但是当我添加第五个元素时......第五个元素垂直对齐第一个选项卡...

这是原始代码:

<div class="content row info active" id="panel2">
     <?php query_posts('p=35'); ?>
    <?php while (have_posts()) : the_post(); ?>

            <div class="large-12 columns thu">
<dl class="row content tabs small-6 large-centered columns" data-tab>

 <dd><a href="#cabernetsauvignon"><span class="link">Cabernet Sauvignon</span></a></dd>
  <dd><a href="#merlot"><span class="link">Merlot</span></a></dd>
    <dd><a href="#chardonnay"><span class="link">Chardonnay</span></a></dd>
<dd><a href="#sauvignonblanc"><span class="link">Sauvignon Blanc</span></a></dd></dl>
                <?php the_post_thumbnail('full'); ?>
             </div>
            <div class="large-6 columns txt">
                <?php the_content(); ?>
            </div> 
    </div> 
            <?php endwhile;?>

这是我的改变:

<div class="content row info active" id="panel2">
     <?php query_posts('p=35'); ?>
    <?php while (have_posts()) : the_post(); ?>

<dl class="row content tabs small-6 large-centered columns" data-tab>

<dd><a href="#cabernetsauvignon"><span class="link">Cabernet Sauvignon</span></a></dd>
<dd><a href="#merlot"><span class="link">Merlot</span></a></dd>
<dd><a href="#chardonnay"><span class="link">Chardonnay</span></a></dd>
<dd><a href="#sauvignonblanc"><span class="link">Sauvignon Blanc</span></a></dd>
<dd><a href="#sauvignonblanc"><span class="link">Carmenere</span></a></dd></dl>

                <?php the_post_thumbnail('full'); ?>
             </div>
            <div class="large-6 columns txt">
                <?php the_content(); ?>
            </div> 
    </div> 
            <?php endwhile;?>

我怎样才能正确地添加第五个元素...使其水平对齐？

Answer 1

class="row 创建一个新行，它应该可能是一个列/单元格