Question

我在链接周围有一个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>

Answer 1

边界应直接提供给<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>

如何使CSS边框仅围绕我的链接？

1 个答案: