我有一个围绕链接的 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>最佳答案
边框应该直接给<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>关于html - 如何让我的 CSS 边框只包围我的链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54855688/