我在链接周围有一个CSS边框,但是一直延伸到左侧,但我只希望它包围链接。我的网站是http://calvinhaworth.x10host.com/desktophome/。 我的HTML是
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calvin Haworths Portfolio (Desktop) </title>
<style type="text/css">
div.cntr {
text-align: center;
}
div.linkright {
text-align: right;
border: ridge 10px;
}
div.linkright:hover {
border: 10px ridge blue;
}
</style>
</head>
<body>
<div class = linkright>
<a href = "http://calvinhaworth.x10host.com/teamlife9thdesktop/">Team/Life Activities (9th grade)</a>
</div>
<div class = linkright>
<a href = "http://calvinhaworth.x10host.com/biology9thdesktop/">Biology (9th Grade)</a>
</div>
<div class = cntr>
<img src = "https://res.cloudinary.com/calvinhaworth/image/upload/v1550969360/LogoMakr_3X5LlB.png">
</div>
<div class = cntr>
<h1>Welcome to my portfolio. Click the wrong link? Go to the <a href = "http://www.calvinhaworth.x10host.com">main page</a>. </h1>
</div>
<div class = cntr>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3066.160904221107!2d-104.76233648462336!3d39.78094427944419!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876c641a5240b78b%3A0x4166849d10c9bfd2!2sDr.+Martin+Luther+King+Jr.+Early+College!5e0!3m2!1sen!2sus!4v1547568093508" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
答案 0 :(得分:2)
边界应直接提供给<a>
,而不是div
。
div.cntr {
text-align: center;
}
div.linkright {
text-align: right;
margin:25px 0;
}
div.linkright a{
border: ridge 10px;
}
div.linkright:hover a{
border: 10px ridge blue;
}
<div class = linkright>
<a href = "http://calvinhaworth.x10host.com/teamlife9thdesktop/">Team/Life Activities (9th grade)</a>
</div>
<div class = linkright>
<a href = "http://calvinhaworth.x10host.com/biology9thdesktop/">Biology (9th Grade)</a>
</div>
<div class = cntr>
<img src = "https://res.cloudinary.com/calvinhaworth/image/upload/v1550969360/LogoMakr_3X5LlB.png">
</div>
<div class = cntr>
<h1>Welcome to my portfolio. Click the wrong link? Go to the <a href = "http://www.calvinhaworth.x10host.com">main page</a>. </h1>
</div>
<div class = cntr>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3066.160904221107!2d-104.76233648462336!3d39.78094427944419!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876c641a5240b78b%3A0x4166849d10c9bfd2!2sDr.+Martin+Luther+King+Jr.+Early+College!5e0!3m2!1sen!2sus!4v1547568093508" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>