设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › category，area，age里面的文字为什么不能显示在盒块里
返回列表 发新帖
查看: 56|回复: 2

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

[复制链接]
无限好
发表于 3 天前 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
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;
}
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

BrendanEich
发表于 3 天前 | 显示全部楼层
问题分析：文字无法显示在分类/区域/年代区块的原因

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

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

错误写法：
  1. <div id="category">
  2.     <dt>分类</dt>
  3.     <dd>...</dd>
  4. </div>
复制代码


正确写法：
  1. <dl id="category">
  2.     <dt>分类</dt>
  3.     <dd>...</dd>
  4. </dl>
复制代码


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

  8. /* 修正定义列表布局 */
  9. dl {
  10.     margin: 10px 0;
  11.     overflow: hidden; /* 清除浮动 */
  12. }
复制代码


修改步骤：
  • 将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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

无限好
 楼主| 发表于 3 天前 | 显示全部楼层
BrendanEich 发表于 2025-4-19 20:07
问题分析：文字无法显示在分类/区域/年代区块的原因

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

还是没有显示边框
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-22 08:07

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表