html - 如何使我的 CSS 边框仅围绕我的链接?
问题描述
我有一个围绕链接的 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>
推荐阅读
- c# - C# 列表查找“对象”
- windows - 使用批处理文件编辑字符串中的单词
- sirikit - 如果任何整数参数 == 0,INShortcut 是否会失败?
- hadoop - 在 Apache Hadoop 中的 Datanode 内重新平衡磁盘
- android - 闪屏覆盖 PreferenceActivity
- php - 如何将表单中的数据插入数据库并获取最后插入的 ID/在 CI 中创建 uniqueID 作为用户的 Session
- java - 当我需要计算股权回报时,嵌套循环给了我相同或错误的答案
- python - 我应该使用等待popen吗
- php - 如何将随机数插入数据库不重复
- java - Android studio 点击 Listview 并设置视图