category，area，age里面的文字为什么不能显示在盒块里,Web开发,编程语言专区,鱼C论坛

无限好 发表于 2025-4-19 20:07:00

category，area，age里面的文字为什么不能显示在盒块里

category，area，age里面的文字为什么不能显示在盒块里
html部分
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>猫眼电影</title>
   <link rel="stylesheet" href="2424.css">
</head>
<body>
   <div id="wrapper">
         <div id="head">
            <h1><a href="#">猫眼电影</a></h1>
            <div>
               <select name="" id="">
                     <option value="">a'a'a</option>
               </select>
            </div>
            <ul>
               <li><a href="#">首页</a></li>
               <li><a href="#">电影</a></li>
               <li><a href="#">影院</a></li>
               <li><a href="#">演出</a></li>
            </ul>
            <ul>
               <li><a href="#">App下载</a></li>
               <li><a href="#">登录</a></li>
            </ul>
         </div>
         <div id="nav">
            <ul>
               <li><a href="">正在放映</a></li>
               <li><a href="">即将放映</a></li>
               <li><a href="">经典电影</a></li>
            </ul>
         </div>
   </div>
   <d1 id="category">
         <dt>分类</dt>
         <dd><a herf="#">全部</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
   </d1>
   <d1 id="area">
         <dt>区域</dt>
         <dd><a herf="#">全部</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
   </d1>
   <d1 id="age">
         <dt>区域</dt>
         <dd><a herf="#">全部</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">大陆</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
         <dd><a herf="#">爱情</a></dd>
   </d1>
   <ul id="sort">
         <li><input type="radio" name = "aaa" checked><a herf="">按热门排序</a></li>
         <li><input type="radio" name = "aaa" checked><a herf="">按热门排序</a></li>
         <li><input type="radio" name = "aaa" checked><a herf="">按热门排序</a></li>
   </ul>
   <div id="poster">
         <ul>
            <li><img src="链接"alt=""></li>
            <li><a href="">电影片名1</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
            <a href="" class="zoom">
               <img scr="链接" alt="">
               <h3>电影片名</h3>
               <p>类型：</p>
               <p>主演：</p>
               <p>上映时间：</p>
               <p>9.1</p>
            </a>
         </ul>
         <ul>
            <li><img src="链接"alt=""></li>
            <li><a href="">电影片名1</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
            <a href="" class="zoom">
               <img scr="链接" alt="">
               <h3>电影片名</h3>
               <p>类型：</p>
               <p>主演：</p>
               <p>上映时间：</p>
               <p>9.1</p>
            </a>
         </ul>
         <ul>
            <li><img src="链接"alt=""></li>
            <li><a href="">电影片名1</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
            <a href="" class="zoom">
               <img scr="链接" alt="">
               <h3>电影片名</h3>
               <p>类型：</p>
               <p>主演：</p>
               <p>上映时间：</p>
               <p>9.1</p>
            </a>
         </ul>
         <ul>
            <li><img src="链接"alt=""></li>
            <li><a href="">电影片名1</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
            <a href="" class="zoom">
               <img scr="链接" alt="">
               <h3>电影片名</h3>
               <p>类型：</p>
               <p>主演：</p>
               <p>上映时间：</p>
               <p>9.1</p>
            </a>
         </ul>
   </div>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
         <ul>
            <li><a herf="">电影片名</a></li>
            <li>2DIMAX</li>
            <li>购票</li>
            <li>评分</li>
         </ul>
   </div>

   <div id="page">
         <a href="">上一页</a>
         <a href="">1</a>
         <a href="">2</a>
         <a href="">下一页</a>
   </div>
   <div id="footer">
         <p>Lordem iosji ejfue constmerbn shige huwh</p>
         <p>Lordem iosji ejfue constmerbn shige huwh</p>
         <p>Lordem iosji ejfue constmerbn shige huwh</p>
         <p>Lordem iosji ejfue constmerbn shige huwh</p>
         <p>Lordem iosji ejfue constmerbn shige huwh</p>
         <p>Lordem iosji ejfue constmerbn shige huwh</p>
   </div>
</body>
</html>
css部分
*{
padding: 0%;
margin: 0%;
list-style: none;
color:#666;
}
a {
color:inherit;
text-decoration:none;
}
a:hover{
color:red;
}
/*第一部分*/
#head{
width: 1200px;
height:65px;
margin:0 auto;
position:fixed;
background-color: white;
z-index: 5;
top: 0;
left:50%;
margin-left: -600px;
}
#head h1,
#head div,
#head ul,
#head li {
float: left;
margin-right: 20px;
}
#head ul:nth-child(4){
float:right;
}
#head h1 a{
display:inline-block;
width: 133px;
height:0;
padding-top: 65px;
background:hidden;
}
#head div{
height:65px;
line-height: 65px;
}
#head ul li{
height:65px;
line-height:65px;
}
#head ul:nth-child(3) li:nth-child(2){
background-color: red;
}
#head ul:nth-child(3) li:nth-child(2)a{
padding: 5px;
color:white;
}
#wrapper{
height: 65px;
background-color: white;
position: fixed;
width:100%;
top:0;
left:0;
}
#head select{
border:0;
outline:0;
}
/*第二部分*/
#nav{
height:40px;
background-color: #333;
margin:0 auto 20px;
}
#nav ul{
width:300px;
margin:0 auto;
}
#nav ul li{
float:left;
height:40px;
line-height: 40px;
margin-right: 30px;
position:relative;
}
#nav div{
width:0;
height:0;
border-top: 0;
border-right: 5px solid transparent;
border-bottom:7px solid white ;
border-left: 5px solid transparent;
position: absolute;
top:33px;
left:26px;
}
/*第三部分*/
#category,
#area,
#age{
width:1100px;
height:70px;
border:1px solid#ccc;
margin: 0px auto;
padding: 9px;
box-sizing:border-box;
overflow: hidden;
}
#category dt,
#area dt,
#age dt{
height:70px;
float:left;
margin-right: 10px;
}
#category dd,
#area dd,
#age dd{
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
#category dd:nth-child(2)a,
#area dd:nth-child(2)a,
#age dd:nth-child(2)a{
background-color: red;
color:white;
padding: 2px 5px;
border-radius: 10px;
}
/*第四部分*/
#sort{
width:1100px;
height:30px;
margin:10px auto;
}
#sort li{
float:left;
margin-right: 20px;
}
/*第五部分*/
#poster{
width:1100px;
margin: 0 auto;
}
#poster::after{
content:"";
display:block;
clear:both;
}
#poster ul{
width:160px;
height:280px;
position:relative;
float:left;
margin-right: 28px;
text-align: center;
box-sizing: border-box;
}
#poster li:nth-child(3){
position: absolute;
top:0;
left:0;
background-color: blue;
color:white;
}
#poster li:nth-child(4){
position: absolute;
top:195px;
left:122px;
background-color: red;
color:white;
}
#poster li:nth-child(6n){
margin-right: 0;
}
#poster li:nth-child(5){
color: orange;
font-style: italic;
font-weight: 700;
}
#poster.zoom{/*悬停放大*/
position: absolute;
top: -55px;
left:-29px;
z-index: 1;
display:none;
}
#poster.zoom img{
margin-bottom: -105px;
}
#poster.zoom h3,
#poster.zoom p{
background-color: aliceblue;
position: relative;
text-align: left;
padding:3px 20px;
}
#poster.zoom p:nth-child(6){
position: absolute;
top: 210px;
left:150px;
}
#poster ul li:nth-child(1):hover ~.zoom{
display:block;
}
/*第六部分*/
#page{
height: 30px;
text-align: center;
margin-top: 10px;
}
#page a{
border: 1px solid #eee;
padding:3px 10px;
}
#page a:nth-child(2){
background-color: red;
color:white;
}
#page a:hover{
border: 1px solid red;
}
/*第七部分*/
#footer{
background-color: #666;
text-align: center;
}
#footer p{
color: white;
}

BrendanEich 发表于 2025-4-19 20:07:46

问题分析：文字无法显示在分类/区域/年代区块的原因

主要存在以下两个核心问题：

1. HTML结构错误
原始代码将<dt>、<dd>标签放在<div>中，应该改为使用<dl>包裹

错误写法：
<div id="category">
<dt>分类</dt>
<dd>...</dd>
</div>

正确写法：
<dl id="category">
<dt>分类</dt>
<dd>...</dd>
</dl>

2. CSS样式冲突
需要添加以下样式：
/* 添加dt,dd基础样式 */
dt, dd {
display: inline-block;
margin: 0 5px;
line-height: 30px;
}

/* 修正定义列表布局 */
dl {
margin: 10px 0;
overflow: hidden; /* 清除浮动 */
}

修改步骤：

[*]将HTML中所有<div id="category">改为<dl id="category">
[*]将对应的闭合标签</div>改为</dl>
[*]在CSS中添加上述基础样式

修改后效果示意图：
┌───────────────────┐
│ 分类 │
│ 全部爱情爱情... │
└───────────────────┘

常见问题延伸：
若仍存在文字重叠问题，可尝试：
1. 调整容器高度：将css中height:70px改为min-height:70px
2. 增加间距：为dd添加margin: 5px 10px
3. 强制换行：添加white-space: normal属性

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

无限好 发表于 2025-4-19 20:30:56

BrendanEich 发表于 2025-4-19 20:07
问题分析：文字无法显示在分类/区域/年代区块的原因

主要存在以下两个核心问题：

还是没有显示边框

不二如是 发表于前天 19:24

category / area / age 三个盒子确实被渲染出来了，但里面的文字被“挡”在盒子的可视区域之外，所以看上去像是“没有显示”。造成遮挡的核心代码在 CSS：

#category,
#area,
#age{
height:70px; /* 高度只给了 70 px */
overflow:hidden; /* 超出的部分全部裁掉 */
}
每个 <dd> 里有很多链接，第一行还能露出来，但超过 70 px 的行数就都被 overflow:hidden 裁掉了——文字其实存在，只是被剪掉了。

把固定高度去掉、或设置自动高度、或改为 overflow:visible/auto/scroll 就能正常看到完整内容：

#category,
#area,
#age{
/* height:70px;去掉或调高 */
min-height:70px; /* 让盒子至少 70px，但可以变高 */
overflow:visible; /* 允许内容正常撑开 */
}

~~学会了吗

页: [1]

鱼C论坛's Archiver

category，area，age里面的文字为什么不能显示在盒块里