Question

我正在创建一个提供有关课程信息的div。通过这些信息，课程的价格和按钮说“＆＃34; Take Class＆＃34;链接到购买页面。但是，该链接正在泄漏到其他信息中。

＆＃13;

/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* end of font */

/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}

a {
  text-decoration: none;
}

/* 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 */

/* courses.php */

/* course intro */

#course_body {
  background: #F4F4F4;
}

#course_intro {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: 40px;
  left: 50px;
}

#intro_title {
  width: 562px;
  position: relative;
  top: 2px;
}

#intro_video {
  width: 375px;
  height: 210px;
  position: relative;
  top: -7px;
}

/* end of course intro */

/* course facts */

/* Price Information */

#price_tag {
  font-size: 32px;
  font-weight: bold;
  color: #373737;
  position: relative;
  top: -15px;
}

#price_div {
  background: #17AA1C;
  color: white;
  text-align: center;
  padding: 11px 12px 11px 12px;
  font-size: 18px;
  width: 116px;
  font-weight: normal;
  position: relative;
  top: 12px;
  border-radius: 3px;
}

#price_div:hover {
  background: #159D1A;
}

#price_div {
  text-decoration: none;
}

/* End of Price Information */

#course_facts {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: -311px;
  left: 675px;
  font-size: 20px;
  height: 115px;
}

  .Rating {
  position: relative;
  width: 125px;
  height: 25px;
  top: -111px;
  left: 180px;
}
.Rating svg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}
.Rating meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
  background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
  background: #FF7867;
}

#facts_ratings {
  position: relative;
  top: -110px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
  left: 175px;
}

#course_length {
  position: relative;
  top: -100px;
  left: 185px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_time {
  letter-spacing: 0;
  font-weight: bold;
  font-size: 18px;
  color: #2E3D49;
}

/* end of course facts */

/* skill level */

#course_skillText {
  position: relative;
  top: -190px;
  left: 310px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

.fillSquare, .emptySquare {
  display: inline-block;
  position: relative;
  left: 80px;
}

.fillSquare {
  width: 12px;
  height: 12px;
  background: #666;
}

.emptySquare {
  width: 12px;
  height: 12px;
  background: #B8B8B8;
}

#skill_level {
  position: relative;
  left: 85px;
  top: -2px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: normal;
  color: #2E3D49;
}

/* end of skill level */

/* language */

#course_language {
  position: relative;
  top: -154px;
  left: 235px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#language_type {
  letter-spacing: 0;
  font-weight: bold;
  font-size: 18px;
  color: #2E3D49;
  position: relative;
  left: 153px;
}

/* end of language */

/* Wish List button */

#course_wish {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 15px;
  position: absolute;
  width: 87px;
  padding: 5px;
  position: relative;
  top: -65px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
  border-radius: 3px;
}

#empty_heart {
  color: #FF827F;
}

#course_wish_text {
  position: relative;
  left: 5px;
}

/* End of Wish List button */


/* Teacher div */

#teacher_div {
  width: 326px;
  border: 1px solid #ddd;
  background: white;
  position: relative;
  left: 1002px;
  padding: 15px;
  top: -280px;
  text-align:center;
}

#teacher_picture {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

#teacher_name {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
}

#teacher_div a {
  text-decoration: none;
  color: #00698C;
}

#teacher_div a:hover {
  text-decoration: underline;
}

#teacher_tagLine {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #999;
  text-align: center;
  width: 325px;
}

#course_line {
  width: 325px;
  height: 1px;
  background: #DDD;
}

#teacher_info {
  width: 325px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  text-align:left;
}

/* End of Teacher div */

/* Course Learn */

#course_learn {
  background: white;
  border: 1px solid #DDD;
  width: 280px;
  position: relative;
  top: -660px;
  left: 674px;
  font-family: 'Open Sans', sans-serif;
  padding: 15px;
  max-height: 240px;
  font-size: 18px;
  overflow: hidden;
  background-image: rgba(244,244,244,0);
}

#course_learn li {
  font-size: 15px;
  color: #353535;
  padding: 5px;
  text-align: left;
}

/* End of Course Learn */

/* end of courses.php */

＆＃13;

<?php

require "connect.php";

?>

<!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 id='course_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 -->
 
    <!-- Course Introduction -->
      <div id='course_intro'>
        <div id='intro_title'>
          Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
        <video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
      </div>
    <!-- End of Course Introduction -->
    
    <!-- Course Facts -->
      <div id='course_facts'>
        
        <!-- Purchase Information -->
        
        <span id='price_tag'> $30 <br>
        <a href='#'> <div id='price_div'> Take Class </div> </a>
        </span>
        
        <!-- End of Purchase Information -->
        
        <!-- Star Ratings -->
         <span id='facts_ratings'> 400 Ratings </span>
                  <div class="Rating">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
            <defs>
              <path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
            </defs>
            <use fill="white" fill-rule="evenodd" xlink:href="#a"/>
          </svg>
        
          <meter min="0" max="5" value="4.28"></meter>
        </div>
        <!-- End of Star Ratings -->
        
        <!-- Length -->
         <span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
        <!-- End of Length -->
        
        <!-- Skill Level -->
         <span id='course_skillText'> Skill Level <br> <span id='course_skill'>
         
         <!-- Skill Boxes -->
          <div class='fillSquare'></div> <div class='fillSquare'></div>  <div class='emptySquare'></div>
         <!-- End of Skill Boxes -->
         
         <span id='skill_level'> Intermediate </span>
         
         </span> </span>
        <!-- End of Skill Level -->
        
        <!-- Language -->
          <span id='course_language'> Language <br> <span id='language_type'> English </span> </span>
        <!-- End of Language -->
        
        <!-- Wish List Button -->
          <div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
        <!-- End of Wish List Button -->
        
      </div>
                <!-- End of Course Facts -->
                
                
                <!-- Teacher Div -->
                  <div id='teacher_div'>
                    <a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
                    
                   <a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
                   
                   <div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div> <br>
                   
                   <div id='course_line'></div> <br>
                   
                   <div id='teacher_info'> Hello! My name is Andy and I am a professional voice actor. Top-Rated & Featured Seller on Fiverr. Over 5K+ people served worldwide! Proud to be the voice for the Fiverr App! Providing voice services for Commercials, Narrations, E-Learning, Explainer Videos, Apps and more! See my reviews... </div>
                   
                  </div>
                <!-- End of Teacher Div -->
                
                <!-- What you'll learn -->
                  <div id='course_learn'>
                    <span id='learn_text'> What you'll learn </span>
                    <ul>
                      <li> Build a polished and fun platform game using GameMaker Studio. </li>
                      <li> Import image, sound, and background assets into GameMaker Studio. </li>
                      <li> Program using GameMaker Studio's built in scripting language GML (GameMaker Language). </li>
                      <li> Create game objects and control them using Events and Actions. </li>
                      <li> Design game levels using Rooms. </li>
                    </ul>
                  </div>
                <!-- End of What you'll learn -->

＆＃13;

要复制此错误，请在仍然是按钮之外的链接的按钮上查找一条线。尝试进入技能等级和语言......

如何解决此问题？

Answer 1

<a href='#'> <div id='price_div'> Take Class </div> </a>

也许您想将此更改为

<div id='price_div'><a href='/your-purchase-page-link.html'>Take Class</a></div>

Answer 2

您的div元素是块级别，因此它将自动获取父元素的整个宽度（至少）。您设置其宽度，但这是内容的宽度。节点本身仍然占据整个宽度。

要执行您想要的操作，请将#price_div设置为display:inline-block;或float:left;以使其折叠到您想要的宽度。

通过设置内联块，您可以使div的行为类似于文本框，能够包含其文本内容，但仍然表现得像块级元素，因此您可以设置其宽度和高度。

Answer 3

只需将此添加到您的css

即可

#price_tag a { display: inline-block; }
span#price_tag:after {
    display: block;
    content: "";
}

您的a是内联元素，您需要将其设置为内联块或块元素才能设置它的宽度。然后使用after，您可以将其余内容降低

为什么我的div链接链接到我的其他内容？

3 个答案: