老师 左侧的下划线怎样才能不和文字重合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
section{
width:1250px;
border: 1px solid red;
margin:0 auto;
}
aside{
width:500px;
border:1px solid red;
float:left;
}
article{
border:1px solid red;
width:700px;
float:right;
}
h1{
display:inline-block;
font-size: 30px;
margin-bottom:30px;
}
.huise{
color:#ececec;
}
dl{
position:relative;
left:20px;
}
dl img{
position:absolute;
top:0;
left:0;
z-index:1;
}
dl p{
position:absolute;
top:10px;
left:18px;
z-index:2;
font-size:20px;
color:white;
}
dl dt{
margin-top:-3px;
margin-left:60px;
font-weight:bolder;
text-decoration:underline;
line-height:30px;
}
dl .text{
margin-left:60px;
}
article img{
width:700px;
height:230px;
}
article p{
margin-bottom:20px;
}
.clear{clear:both;}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent</h1>
<h1 class="huise">Course</h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>
<p>1</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
</dd>
<dd class="text">HTML is the standard markup language used to create wes pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>
<p>2</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
</dd>
<dd class="text">HTML is the standard markup language used to create wes pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>
<p>3</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
</dd>
<dd class="text">HTML is the standard markup language used to create wes pages and its elements form the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>
<p>4</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png">
</dd>
<dd class="text">HTML is the standard markup language used to create wes pages and its elements form the building blocks of all websites.</dd>
</dl>
</aside>
<article>
<h1>Welcome to</h1>
<h1 class="huise">Massive Open Online Course!</h1>
<p>We provide the latest knowledge to help you cope with the changir woeld!</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg">
<p>We provide the latest knowledge to help you cope with the changir woeld!</p>
<p>HTML is the standard markup language used to create wes pages and its elements form the building blocks of all websites.</p>
</article>
<div class="clear"></div>
</section>
</body>
</html>0
收起
正在回答
1回答
你好同学，是说的如下边框与文字重合吗?这是因为dl设置定位之后溢出了父容器区域
如果想要不超出父元素区域，那么需要给它设置固定宽度，如下调整：
如果没有解答疑惑，可以详细描述一下，以便老师准确的帮助你解决。
祝学习愉快，望采纳。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星