我有div，每个div都打开一个不同的页面。但是，我的链接泄露了他们的范围超出了他们各自的div：
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* course div */
#course_div {
width: 1256px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
width: 205.5px;
height: 103px;
position: relative;
background: white;
}
#course_text {
position: relative;
left: 3px;
max-height: 20px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-table;
margin-right: 30px;
margin-bottom: 20px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
.course_main > a { text-decoration: none; color: #000; }
#author {
color: #333;
font-size: 13px;
position: relative;
top: -4px;
left: 5px;
}
#author_picture {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
top: 8px;
left: 3px;
padding: 1px;
border: 2px solid #D4D9DD;
}
#wish_heart {
font-size: 16px;
padding: 6px 10px 6px 10px;
color: #C7C7C7;
position: relative;
left: -4px;
top: 4px;
}
#wish_heart:hover {
color: #D23837;
}
#course_price {
color: #00B22D;
font-size: 18px;
letter-spacing: -1px;
position: relative;
left: 130px;
}
/* end of course div */<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Development</a>
<ul>
<li><a href="#">Web Development</a>
</li>
<li><a href="#">Mobile Apps</a>
</li>
<li><a href="#">Programming Languages</a>
</li>
<li><a href="#">Game Development</a>
</li>
<li><a href="#">Databases</a>
</li>
<li><a href="#">Software Testing</a>
</li>
<li><a href="#">Software Engineering</a>
</li>
<li><a href="#">Development Tools</a>
</li>
<li><a href="#">E-Commerce</a>
</li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Finance</a>
</li>
<li><a href="#">Entrepreneurship</a>
</li>
<li><a href="#">Communications</a>
</li>
<li><a href="#">Management</a>
</li>
<li><a href="#">Sales</a>
</li>
<li><a href="#">Strategy</a>
</li>
<li><a href="#">Operations</a>
</li>
<li><a href="#">Project Management</a>
</li>
<li><a href="#">Business Law</a>
</li>
<li><a href="#">Data and Anylytics</a>
</li>
<li><a href="#">Home Business</a>
</li>
<li><a href="#">Human Resources</a>
</li>
<li><a href="#">Industry</a>
</li>
<li><a href="#">Media</a>
</li>
<li><a href="#">Real Estate</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
</li>
<li><a href="#">IT & Software</a>
<ul>
<li class="dir"><a href="#">IT Certification</a>
</li>
<li class="dir"><a href="#">Network & Security</a>
<li><a href="#">Hardware</a>
</li>
<li><a href="#">Operating Systems</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Office Productivity</a>
<ul>
<li class="dir"><a href="#">Microsoft</a>
</li>
<li class="dir"><a href="#">Apple</a>
<li><a href="#">Google</a>
</li>
<li><a href="#">SAP</a>
</li>
<li><a href="#">Intuit</a>
</li>
<li><a href="#">Salesforce</a>
</li>
<li><a href="#">Oracle</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Personal Development</a>
<ul>
<li class="dir"><a href="#">Personal Transformation</a>
</li>
<li class="dir"><a href="#">Productivity</a>
<li><a href="#">Leadership</a>
</li>
<li><a href="#">Personal Finance</a>
</li>
<li><a href="#">Career Development</a>
</li>
<li><a href="#">Parenting & Relationships</a>
</li>
<li><a href="#">Happiness</a>
</li>
<li><a href="#">Religion & Spirituality</a>
</li>
<li><a href="#">Personal Brand Building</a>
</li>
<li><a href="#">Creativity</a>
</li>
<li><a href="#">Influence</a>
</li>
<li><a href="#">Self Esteem</a>
</li>
<li><a href="#">Stress Management</a>
</li>
<li><a href="#">Memory and Study Skills</a>
</li>
<li><a href="#">Motivation</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Design</a>
<ul>
<li class="dir"><a href="#">Web Design</a>
</li>
<li class="dir"><a href="#">Graphic Design</a>
<li><a href="#">Design Tools</a>
</li>
<li><a href="#">User Experience</a>
</li>
<li><a href="#">Game Design</a>
</li>
<li><a href="#">Design Thinking</a>
</li>
<li><a href="#">3D & Animation</a>
</li>
<li><a href="#">Fashion</a>
</li>
<li><a href="#">Architectural Design</a>
</li>
<li><a href="#">Interior Design</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Marketing</a>
<ul>
<li class="dir"><a href="#">Digital Marketing</a>
</li>
<li class="dir"><a href="#">Search Engine Optimization</a>
<li><a href="#">Social Media Marketing</a>
</li>
<li><a href="#">Branding</a>
</li>
<li><a href="#">Marketing Fundamentals</a>
</li>
<li><a href="#">Analystics & Automation</a>
</li>
<li><a href="#">Public Relations</a>
</li>
<li><a href="#">Advertising</a>
</li>
<li><a href="#">Video & Mobile Marketing</a>
</li>
<li><a href="#">Content Marketing</a>
</li>
<li><a href="#">Non-Digital Marketing</a>
</li>
<li><a href="#">Growth Hacking</a>
</li>
<li><a href="#">Affiliate Marketing</a>
</li>
<li><a href="#">Product Marketing</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Lifestyle</a>
<ul>
<li class="dir"><a href="#">Life Hacks</a>
</li>
<li class="dir"><a href="#">Arts & Crafts</a>
</li>
<li class="dir"><a href="#">Food & Beverage</a>
<li><a href="#">Beauty & Makeup</a>
</li>
<li><a href="#">Travel</a>
</li>
<li><a href="#">Gaming</a>
</li>
<li><a href="#">Home Improvement</a>
</li>
<li><a href="#">Pet Care & Training</a>
</li>
</ul>
<li><a href="#">Photography</a>
<ul>
<li class="dir"><a href="#">Digital Photography</a>
</li>
<li class="dir"><a href="#">Photography Fundamentals</a>
</li>
<li class="dir"><a href="#">Portraits</a>
<li><a href="#">Landscape</a>
</li>
<li><a href="#">Black & White</a>
</li>
<li><a href="#">Photography Tools</a>
</li>
<li><a href="#">Mobile Photography</a>
</li>
<li><a href="#">Travel Photography</a>
</li>
<li><a href="#">Commercial Photography</a>
</li>
<li><a href="#">Wedding Photography</a>
</li>
<li><a href="#">Video Design</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Health & Fitness</a>
<ul>
<li class="dir"><a href="#">Fitness</a>
</li>
<li class="dir"><a href="#">General Health</a>
</li>
<li class="dir"><a href="#">Sports</a>
<li><a href="#">Nutrition</a>
</li>
<li><a href="#">Yoga</a>
</li>
<li><a href="#">Mental Health</a>
</li>
<li><a href="#">Dieting</a>
</li>
<li><a href="#">Self Defense</a>
</li>
<li><a href="#">Safety & First Aid</a>
</li>
<li><a href="#">Dance</a>
</li>
<li><a href="#">Meditation</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Language</a>
<ul>
<li class="dir"><a href="#">English</a>
</li>
<li class="dir"><a href="#">Spanish</a>
</li>
<li class="dir"><a href="#">German</a>
<li><a href="#">French</a>
</li>
<li><a href="#">Japanese</a>
</li>
<li><a href="#">Portuguese</a>
</li>
<li><a href="#">Chinese</a>
</li>
<li><a href="#">Russian</a>
</li>
<li><a href="#">Latin</a>
</li>
<li><a href="#">Arabic</a>
</li>
<li><a href="#">Hebrew</a>
</li>
<li><a href="#">Italian</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Music</a>
<ul>
<li class="dir"><a href="#">Instruments</a>
</li>
<li class="dir"><a href="#">Production</a>
</li>
<li class="dir"><a href="#">Music Fundamentals</a>
<li><a href="#">Vocal</a>
</li>
<li><a href="#">Music Techniques</a>
</li>
<li><a href="#">Music Software</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Academics</a>
<ul>
<li class="dir"><a href="#">Social Science</a>
</li>
<li class="dir"><a href="#">Math & Science</a>
</li>
<li class="dir"><a href="#">Humanities</a>
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<div class='course_main'>
<a href='hi'>
<img src='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='course_img'>
<div id='course_info'>
<div id='course_text'>Become a Game Maker with Game Maker Studio</div>
<br>
<img src='https://udemy-images.udemy.com/user/50x50/6813534_cefd_2.jpg' id='author_picture'> <span id='author'> Benjamin Anderson </span>
<br>
<i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i> <span id='course_price'> $30 </span>
</div>
</a>
</div>
<div class='course_main'>
<a href='bye'>
<img src='https://udemy-images.udemy.com/course/480x270/383612_5575_5.jpg' id='course_img'>
<div id='course_info'>
<div id='course_text'>Bake Artisan Sourdough Bread Like a Professional</div>
<br>
<img src='https://udemy-images.udemy.com/user/50x50/1718672_52e9_8.jpg' id='author_picture'> <span id='author'> Teresa L Greenway </span>
<br>
<i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i> <span id='course_price'> $50 </span>
</div>
</a>
</div>
</div>
</body>
</html>我很抱歉div的格式太乱了。这个HTML实际上是由PHP while循环生成的，对于格式化代码并不熟悉。第二个div有一条蓝线，实际上是一个链接。我可以点击div外面的链接。为什么链接泄漏？
答案 0 :(得分：1)
将div移到链接之外，然后添加css规则：.course_main＆gt;一个{text-decoration：none;纠正造型。
<div class='course_main'>
<a href='hi'>
</a>
</div>
<div class='course_main'>
<a href='bye'>
</a>
</div>
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* course div */
#course_div {
width: 1256px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
width: 205.5px;
height: 103px;
position: relative;
background: white;
}
#course_text {
position: relative;
left: 3px;
max-height: 20px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-table;
margin-right: 30px;
margin-bottom: 20px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
.course_main > a { text-decoration: none; color: #000; }
#author {
color: #333;
font-size: 13px;
position: relative;
top: -4px;
left: 5px;
}
#author_picture {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
top: 8px;
left: 3px;
padding: 1px;
border: 2px solid #D4D9DD;
}
#wish_heart {
font-size: 16px;
padding: 6px 10px 6px 10px;
color: #C7C7C7;
position: relative;
left: -4px;
top: 4px;
}
#wish_heart:hover {
color: #D23837;
}
#course_price {
color: #00B22D;
font-size: 18px;
letter-spacing: -1px;
position: relative;
left: 130px;
}
/* end of course div */<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Development</a>
<ul>
<li><a href="#">Web Development</a>
</li>
<li><a href="#">Mobile Apps</a>
</li>
<li><a href="#">Programming Languages</a>
</li>
<li><a href="#">Game Development</a>
</li>
<li><a href="#">Databases</a>
</li>
<li><a href="#">Software Testing</a>
</li>
<li><a href="#">Software Engineering</a>
</li>
<li><a href="#">Development Tools</a>
</li>
<li><a href="#">E-Commerce</a>
</li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Finance</a>
</li>
<li><a href="#">Entrepreneurship</a>
</li>
<li><a href="#">Communications</a>
</li>
<li><a href="#">Management</a>
</li>
<li><a href="#">Sales</a>
</li>
<li><a href="#">Strategy</a>
</li>
<li><a href="#">Operations</a>
</li>
<li><a href="#">Project Management</a>
</li>
<li><a href="#">Business Law</a>
</li>
<li><a href="#">Data and Anylytics</a>
</li>
<li><a href="#">Home Business</a>
</li>
<li><a href="#">Human Resources</a>
</li>
<li><a href="#">Industry</a>
</li>
<li><a href="#">Media</a>
</li>
<li><a href="#">Real Estate</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
</li>
<li><a href="#">IT & Software</a>
<ul>
<li class="dir"><a href="#">IT Certification</a>
</li>
<li class="dir"><a href="#">Network & Security</a>
<li><a href="#">Hardware</a>
</li>
<li><a href="#">Operating Systems</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Office Productivity</a>
<ul>
<li class="dir"><a href="#">Microsoft</a>
</li>
<li class="dir"><a href="#">Apple</a>
<li><a href="#">Google</a>
</li>
<li><a href="#">SAP</a>
</li>
<li><a href="#">Intuit</a>
</li>
<li><a href="#">Salesforce</a>
</li>
<li><a href="#">Oracle</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Personal Development</a>
<ul>
<li class="dir"><a href="#">Personal Transformation</a>
</li>
<li class="dir"><a href="#">Productivity</a>
<li><a href="#">Leadership</a>
</li>
<li><a href="#">Personal Finance</a>
</li>
<li><a href="#">Career Development</a>
</li>
<li><a href="#">Parenting & Relationships</a>
</li>
<li><a href="#">Happiness</a>
</li>
<li><a href="#">Religion & Spirituality</a>
</li>
<li><a href="#">Personal Brand Building</a>
</li>
<li><a href="#">Creativity</a>
</li>
<li><a href="#">Influence</a>
</li>
<li><a href="#">Self Esteem</a>
</li>
<li><a href="#">Stress Management</a>
</li>
<li><a href="#">Memory and Study Skills</a>
</li>
<li><a href="#">Motivation</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Design</a>
<ul>
<li class="dir"><a href="#">Web Design</a>
</li>
<li class="dir"><a href="#">Graphic Design</a>
<li><a href="#">Design Tools</a>
</li>
<li><a href="#">User Experience</a>
</li>
<li><a href="#">Game Design</a>
</li>
<li><a href="#">Design Thinking</a>
</li>
<li><a href="#">3D & Animation</a>
</li>
<li><a href="#">Fashion</a>
</li>
<li><a href="#">Architectural Design</a>
</li>
<li><a href="#">Interior Design</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Marketing</a>
<ul>
<li class="dir"><a href="#">Digital Marketing</a>
</li>
<li class="dir"><a href="#">Search Engine Optimization</a>
<li><a href="#">Social Media Marketing</a>
</li>
<li><a href="#">Branding</a>
</li>
<li><a href="#">Marketing Fundamentals</a>
</li>
<li><a href="#">Analystics & Automation</a>
</li>
<li><a href="#">Public Relations</a>
</li>
<li><a href="#">Advertising</a>
</li>
<li><a href="#">Video & Mobile Marketing</a>
</li>
<li><a href="#">Content Marketing</a>
</li>
<li><a href="#">Non-Digital Marketing</a>
</li>
<li><a href="#">Growth Hacking</a>
</li>
<li><a href="#">Affiliate Marketing</a>
</li>
<li><a href="#">Product Marketing</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Lifestyle</a>
<ul>
<li class="dir"><a href="#">Life Hacks</a>
</li>
<li class="dir"><a href="#">Arts & Crafts</a>
</li>
<li class="dir"><a href="#">Food & Beverage</a>
<li><a href="#">Beauty & Makeup</a>
</li>
<li><a href="#">Travel</a>
</li>
<li><a href="#">Gaming</a>
</li>
<li><a href="#">Home Improvement</a>
</li>
<li><a href="#">Pet Care & Training</a>
</li>
</ul>
<li><a href="#">Photography</a>
<ul>
<li class="dir"><a href="#">Digital Photography</a>
</li>
<li class="dir"><a href="#">Photography Fundamentals</a>
</li>
<li class="dir"><a href="#">Portraits</a>
<li><a href="#">Landscape</a>
</li>
<li><a href="#">Black & White</a>
</li>
<li><a href="#">Photography Tools</a>
</li>
<li><a href="#">Mobile Photography</a>
</li>
<li><a href="#">Travel Photography</a>
</li>
<li><a href="#">Commercial Photography</a>
</li>
<li><a href="#">Wedding Photography</a>
</li>
<li><a href="#">Video Design</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Health & Fitness</a>
<ul>
<li class="dir"><a href="#">Fitness</a>
</li>
<li class="dir"><a href="#">General Health</a>
</li>
<li class="dir"><a href="#">Sports</a>
<li><a href="#">Nutrition</a>
</li>
<li><a href="#">Yoga</a>
</li>
<li><a href="#">Mental Health</a>
</li>
<li><a href="#">Dieting</a>
</li>
<li><a href="#">Self Defense</a>
</li>
<li><a href="#">Safety & First Aid</a>
</li>
<li><a href="#">Dance</a>
</li>
<li><a href="#">Meditation</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Language</a>
<ul>
<li class="dir"><a href="#">English</a>
</li>
<li class="dir"><a href="#">Spanish</a>
</li>
<li class="dir"><a href="#">German</a>
<li><a href="#">French</a>
</li>
<li><a href="#">Japanese</a>
</li>
<li><a href="#">Portuguese</a>
</li>
<li><a href="#">Chinese</a>
</li>
<li><a href="#">Russian</a>
</li>
<li><a href="#">Latin</a>
</li>
<li><a href="#">Arabic</a>
</li>
<li><a href="#">Hebrew</a>
</li>
<li><a href="#">Italian</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Music</a>
<ul>
<li class="dir"><a href="#">Instruments</a>
</li>
<li class="dir"><a href="#">Production</a>
</li>
<li class="dir"><a href="#">Music Fundamentals</a>
<li><a href="#">Vocal</a>
</li>
<li><a href="#">Music Techniques</a>
</li>
<li><a href="#">Music Software</a>
</li>
<li><a href="#">Other</a>
</li>
</ul>
<li><a href="#">Academics</a>
<ul>
<li class="dir"><a href="#">Social Science</a>
</li>
<li class="dir"><a href="#">Math & Science</a>
</li>
<li class="dir"><a href="#">Humanities</a>
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<div class='course_main'>
<a href='hi'>
<img src='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='course_img'>
<div id='course_info'>
<div id='course_text'>Become a Game Maker with Game Maker Studio</div>
<br>
<img src='https://udemy-images.udemy.com/user/50x50/6813534_cefd_2.jpg' id='author_picture'> <span id='author'> Benjamin Anderson </span>
<br>
<i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i> <span id='course_price'> $30 </span>
</div>
</a>
</div>
<div class='course_main'>
<a href='bye'>
<img src='https://udemy-images.udemy.com/course/480x270/383612_5575_5.jpg' id='course_img'>
<div id='course_info'>
<div id='course_text'>Bake Artisan Sourdough Bread Like a Professional</div>
<br>
<img src='https://udemy-images.udemy.com/user/50x50/1718672_52e9_8.jpg' id='author_picture'> <span id='author'> Teresa L Greenway </span>
<br>
<i class='fa fa-heart' aria-hidden='true' id='wish_heart'></i> <span id='course_price'> $50 </span>
</div>
</a>
</div>
</div>
</body>
</html>
答案 1 :(得分：1)
通常，浏览器会将内置样式应用于所有元素。由于a标记未设置样式，因此浏览器会使用text-decoration: underline;应用默认样式。这就是设计师通常归一化/重置CSS的原因。要快速解决问题，请尝试以下操作：
#course_div a {
text-decoration: none;
}
答案 2 :(得分：0)
由于您不希望在标记上显示默认下划线效果，因此向您的text-decoration: none标记添加css规则<a>可能最为简单。
我意识到这并没有解决根本问题，但解决了这个问题。
答案 3 :(得分：0)
链接包含您设置为display: inline-table的div。但链接通常是display: inline。这个示例的一个简单解决方案是将它们也设置为inline-table，如下所示：
#course_div > a {
display: inline-table;
}