dl中的dd标签栏里面的内容为什么会溢出呢
来源:2-7 编程练习
键盘f11
2020-05-03 16:36:46
<!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
同学你好,这是因为你输入的是字母,浏览器渲染的时候,会认为这是一个英文单词,因此是不会换行的。改成中文即可。或者是设置英文字符自动换行也可以,如下:
希望可以帮到你!
相似问题
回答 3
回答 1