我有一个php代码,如下所示 显示项目列表(列表) 在他们的英文字母下依次列举(如下图所示)。
php代码:
if ( is_array( $beta_lists ) && ! empty( $beta_lists ) ) :
$before_title_character = '';
echo "<pre>"; print_r($beta_lists); echo "</pre>"; // Line A
?>
<ul id="programs-list" class="programs-list js-list-active">
<?php foreach ( $beta_lists as $title => $permalink ) :
$character_title=substr(transliterator_transliterate('Any-Latin;Latin-ASCII;', $title),0,1);
?>
<li class="shows-list__letter">
<?php if ( $character_title !== $before_title_character ) : $before_title_character = $character_title; ?>
<h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></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 endif; ?>
我尽力在fiddle中复制DOM通过php来实现。 https:/jsfiddle.nets4x1zf7L3 小提琴中存在的CSS正是我目前使用的。
问题说明。
虽然列表在他们的字母下是按列显示的,但问题在于 抚弄 是,。
1. 第2栏 列表开始将不以字母开头. (见附件)。抚弄, 学士 列表从另一列开始。它应该只在第1列)
2. 在英文字母下添加一个新的列表,结果经常会有另一个列表被孤零零地放在第2列的顶部。
我想知道我应该在上面的php代码中做哪些修改,以便在下面的 抚弄 2个英文字母应在一列中。 和 2个英文字母 在第二列中没有任何列表被遗漏。
如果我们添加7个(奇数)字母,那么左列应该有4个字母,右列应该有3个字母,而不会有任何列表被遗漏在第二列中。
(第2列应该总是以字母开头,下面的列表)。)
A行 在上面的php代码中打印出以下数组:
Array
(
[Apple] => http://www.abc.mno/apple/
[Ball] => http://www.abc.mno/ball/
[Builders] => http://www.abc.mno/builders/
[Bowling] => http://www.abc.mno/bowling/
[Batting] => http://www.abc.mno/batting/
[Bone] => http://www.abc.mno/bone/
[Bachelor] => http://www.abc.mno/bachelor/
[Correct] => http://www.abc.mno/correct/
[Campaign] => http://www.abc.mno/compain/
[Direct] => http://www.abc.mno/direct/
[Degree] => http://www.abc.mno/degree/
)
数组中的元素数量可以根据预设的值而改变。
这是我尝试过的。
我试图通过在第二列添加margin来避免使用css来避免元素的孤儿,但是每次当新的列表被添加时,我不得不修改css值,我相信这不是一个长期的解决方案。
注意:DOM不在我的控制范围内。 DOM不在我的控制之下。只有php在我的控制之下。
你需要删除倍数 <li>
这就是你的代码。
<li class="shows-list__letter">
<h1 class="shows-list__letter-title">B</h1>
<a class="shows-list__link" href="http://www.abc.mno/ball/">
<h2 class="shows-list__title">Ball</h2>
</a>
</li>
<li class="shows-list__letter">
<a class="shows-list__link" href="http://www.abc.mno/builders/">
<h2 class="shows-list__title">Builders</h2>
</a>
</li>
...
应该是这样的
<li class="shows-list__letter">
<h1 class="shows-list__letter-title">B</h1>
<a class="shows-list__link" href="http://www.abc.mno/ball/">
<h2 class="shows-list__title">Ball</h2>
</a>
<a class="shows-list__link" href="http://www.abc.mno/builders/">
<h2 class="shows-list__title">Builders</h2>
</a>
<a class="shows-list__link" href="http://www.abc.mno/bowling/">
<h2 class="shows-list__title">Bowling</h2>
</a>
....
然后加上这个来避免元素之间的分页。
.shows-list__letter {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
结果在这里。https:/jsfiddle.net0ndajurv
更新
在你的PHP中修改
<li class="shows-list__letter">
<?php if ( $character_title !== $before_title_character ) : $before_title_character = $character_title; ?>
<h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></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 if ( $character_title !== $before_title_character ) : ?>
<li class="shows-list__letter">
<h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></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>
<?php if ( $character_title !== $before_title_character ) :
$before_title_character = $character_title; ?>
</li>
<?php endif; ?>