dl中的dd标签栏里面的内容为什么会溢出呢

来源:2-7 编程练习

键盘f11

2020-05-03 16:36:46

http://img.mukewang.com/climg/5eae820309f354ec11400389.jpg

http://img.mukewang.com/climg/5eae8203090a974013180385.jpg

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局练习</title>

<style type="text/css">


        *{

            margin: 0px auto;padding: 0px;

        }

        .zong1{

            width: 100%;

            background-color: pink;

        }

         .zong1 .zong{

            width:1200px;margin:0 auto;margin-bottom: 50px;

        }

        .tu2 dl{

            float: left;width:426px;

        }

        .tu2 .yi{

            margin-left: 120px;

        }

        .tu2 .yi1{

            margin-left: 120px;

        }

        .clear1:after{

            content: ".";

            display: block;

            height: 0;

            visibility: hidden;

            clear: both;

        }

        .tu1 h2{

            text-align: center;font-family: "微软雅黑";

            font-size: 20px;margin-bottom: 50px;line-height: 100px;

        }

        .zong .tu1{

            width: 1200px;height: 100px;

        }

        .tu2 .nei{

             width: 426px;font-size: 12px;color: gray;height: 100px;

             padding: 10px 0;

         }

         .tu2 .nei1{

            width: 426px;font-size: 12px;color: red;height: 100px;

            padding: 10px 0;display: inline-block;

         }

        

/*此处写代码*/

</style>

</head>

<body>

    <div class="zong1">

    <div class="zong clear">

    <div class="tu1">

        <h2>标题内容</h2>

    </div>

    <div class="tu2 clear1">

        <dl class="yi">

        <dt><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"></dt>

        <dd class="nei">jlfadgljgkfjglkjiognavnouarvniRNVOKVNLKNVLknalvnljlvnl</dd>

        </dl>

        <dl class="yi1">

        <dt><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"></dt>

        <dd class="nei1">jlfadgljgkfjglglkjiLKNVLkgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVgljgkfjglglkjiLKNVn</dd>

        </dl>

    </div>

    </div>

    </div>

<!-- 此处写代码 -->

</body>

</html>

老师,您好,上述为编程练习我写的代码。想要咨询一下为什么<dl><dt></dt><dd></dd></dl>中<dd>标签栏目里面的内容会溢出呢?我已经设定了dd的width和height数值,文字内容满一行以后应该是换行的,为什么是直接超出设定框内?如何通过程序命令进行调整呢?

写回答

1回答

樱桃小胖子

2020-05-05

同学你好,这是因为你输入的是字母,浏览器渲染的时候,会认为这是一个英文单词,因此是不会换行的。改成中文即可。或者是设置英文字符自动换行也可以,如下:

http://img.mukewang.com/climg/5eb115b209e7592104140282.jpg

希望可以帮到你!

0

0 学习 · 40143 问题

查看课程