为什么我的链接泄露了？

时间：2016-05-20 21:15:06

标签： javascript jquery html css

我有div，每个div都打开一个不同的页面。但是，我的链接泄露了他们的范围超出了他们各自的div：

＆＃13;
＆＃13; 
/* 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 */
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我很抱歉div的格式太乱了。这个HTML实际上是由PHP while循环生成的，对于格式化代码并不熟悉。第二个div有一条蓝线，实际上是一个链接。我可以点击div外面的链接。为什么链接泄漏？

4 个答案:

答案 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>

＆＃13;
＆＃13; 
/* 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 */
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 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;
}
相关问题
最新问题