gpt4 book ai didi

php -

文本上的滚动条

转载 作者:太空宇宙 更新时间:2023-11-03 20:36:03 27 4
gpt4 key购买 nike

我遇到了这个问题,我所有的文本都包含在 <p> 中或标题标签,将导致溢出滚动条类型显示(您将能够稍微滚动它)。我设置了overflow没有,甚至没有设置高度。此外,大部分 显示了整个文本(有时滚动会截断文本的最底部)。

此问题在此页面上最为突出:http://www.salonathon.org/meet-the-staff/在每张卡片的标题和说明上。

我搞砸了设置高度并重新禁用所有元素的溢出,这并没有解决任何问题。

顺便说一下,这是一个 WordPress 网站。 (此外,这是我第一次尝试为 WordPress 制作主题,所以如果我做的事情非常错误,请随时告诉我。)

以下是相关的代码:

---- PHP ----

    <section class="header-margin staff-page">
<h1 class="page-title"><?php the_title(); ?></h1>
<?php $args = array(
'category_name' => 'staff',
'meta_key' => 'staff-order',
'orderby' => 'meta_value_num',
'order' => 'ASC',
);

$the_query = new WP_Query($args); ?>
<?php if ( $the_query->have_posts() ) : ?>
<ul>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li>
<div>
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<?php the_post_thumbnail('full');?>
<?php endif; ?>
</div>

<div>
<h4 class="person"> <span class="name"> <?php the_title(); ?></span> | <?php the_excerpt(); ?></h4>
<p> <?php the_content(); ?></p>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>

<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

</section>
</main>

---- CSS ----

.header-margin{
margin-top: 128px;
}

.staff-page {
overflow: hidden;
}

h1.page-title {
text-align: center;
font-size: 50px;
margin: 40px;
}
.staff-page > ul {
list-style: none;
width: 85%;
margin: 0 auto;
padding-left: 0;
}

.person {
font-family: 'Proxima Nova', sans-serif;
font-size: 21px;
font-weight: normal;
padding-top: 10px;
margin: 0;
text-align: left;
}

.name {
font-family: 'salon6';
font-size: 28px;
}

.staff-page > ul > li {
display: block;
margin: 20px 0;
}

.staff-page > ul > li > div > img{
width: 180px;
height: 180px;
display: inline;
}

.staff-page > ul > li{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-flex-flow: row;

justify-content: flex-start;
-webkit-justify-content: flex-start;

flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;

background-color: white;
-webkit-box-shadow: 0px 2px 11px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 2px 11px 0px rgba(0,0,0,0.07);
box-shadow: 0px 2px 11px 0px rgba(0,0,0,0.07);
padding: 20px;
}

.staff-page > ul > li > div:nth-child(2){
padding-left: 25px;
line-height: 15px;
max-width:75%;
}

最佳答案

在下面的代码中使用 line-height: 15px; 会导致滚动条出现不良行为。

CSS:

.staff-page > ul > li > div:nth-child(2){
padding-left: 25px;
line-height: 15px;
max-width:75%;
}

为此:

.staff-page > ul > li > div:nth-child(2){
padding-left: 25px;
max-width:75%;
}

同样在 php 中改变这个:

<p> <?php the_content(); ?></p>

为此:

<?php the_content(); ?>

关于php - <p> 文本上的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32930594/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com