gpt4 book ai didi

html - 为什么我的 div 没有被内联应用?

转载 作者:行者123 更新时间:2023-11-28 05:50:59 25 4
gpt4 key购买 nike

我试过在同一行上制作我的 div。我试过 floating,更改 display 属性并弄乱 widthheight 属性。但没有任何效果:

/* 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: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}

#course_img {
width: 216px;
height: 121.5px;
}

#course_info {
border: 1px solid #ccc;
width: 204px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}

#course_div a {
text-decoration: none;
color: black;
width: 204px;
}

#course_main {
width: 216px;

}

/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<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>
</ul>
</ul>
</ul>
</ul>
</ul>

</ul>

</ul>
</nav>
<!-- end of info nav -->

<div id='course_div'>

<a href='#'> <div id='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

<div id='course_info'>
Ki
</div> </a>

<a href='#'> <div id='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

<div id='course_info'>
Two
</div> </a>

</div>

</div>

</body>
</html>

最佳答案

检查你的代码。 div 标签都乱七八糟。

我在这里修复了它 -> https://jsfiddle.net/kn7g54j1/1/

这是你想要的吗?

<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<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'>

<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

<div id='course_info'>
Ki
</div> </div></a>

<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

<div id='course_info'>
Two
</div> </div></a>


</div>

</body>
</html>



/* 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: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}

#course_img {
width: 216px;
height: 121.5px;
}

#course_info {
border: 1px solid #ccc;
width: 204px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}

.course_div a {
text-decoration: none;
color: black;
width: 204px;
}

.course_main {
width: 216px;
display: inline-block;

}

/* end of course div */

关于html - 为什么我的 div 没有被内联应用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37336458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com