我对基本的Web标记语言还比较陌生。我正在完成在线课程,正在努力使CSS文件中的.mainfooter-links与中心对齐。如果有人可以花几分钟查看代码并告诉我哪里出了问题,我将不胜感激。提前致谢。
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
#product-overview {
background: url("freedom.jpg");
background-repeat:repeat;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title {
color: #2ddf5c;
text-align: center;
}
#product-overview h1 {
color: white;
font-family: 'Anton', sans-serif;
}
.plan {
Background: #d5ffdc;
text-align: center;
padding: 16px;
margin: 8px;
display: inline-block;
width: 30%;
vertical-align: middle;
}
.plan--highlighted {
background: #19b84c;
color: white;
box-shadow: 1px 2px 10px 10px rgba(0, 0, 0, 0.5);enter code here
}
.plan__annotation {
background: white;
border-radius: 10px;
border: 2px solid black;
color: darkgreen;
padding: 8px;
box-shadow: 2px 2px 2px 2px rgba (0, 0, 0, 0.75);
}
.plan__title {
color: #0e4f1f;
}
.plan__price {
color: #858585;
}
.plan--highlighted .plan__title{
color: white;
}
.plan--highlighted .plan__price{
color: #0e4f1f;
}
#Planlist {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
line-height: 2.0;
}
.button {
background: #0e4f1f;
color: white;
font: inherit; /**Inherit font-family and not default**/
border: solid 2px #0e4f1f;
border-radius: 10px;
padding: 8px;
margin: 10px 0px;
font-weight: bold;
cursor: pointer; /**Creates a hand when moved over the
button**/
}
.button:hover,
.button:active {
background:white;
color: #0e4f1f;
}
.button:focus{
outline: none;
}
#Key-Features{
background: #ff1b68;
margin-top: 80px;
padding: 60px;
}
#Key-Features .SectionFeatures-Title{
color: white;
margin: 32px;
text-align: center;
}
.Key-Feature-List{
display:inline-block;
width: 100%;
list-style: none;
padding: 0px;
margin: 0px;
text-align: center;
align-content: center;
}
.Key-Feature-Style{
display:inline-block;
text-align: center;
vertical-align: top;
padding: 16px;
margin: 8px;
width: 30%;
color: white;
font-size: 20px;
font-weight: bolder;
}
.Key-Feature-Image{
display: inline-block;
background: #ffcede;
width: 128px;
height: 128px;
border: 2px solid #424242;
border-radius: 50%;
margin:auto;
}
/* h1 {
font-family: sans-serif;
} */
.main-header {
width: 100%;
background: #2ddf5c;
padding: 8px 16px;
}
.main-header > div {
display: inline-block;
vertical-align: middle;
}
.main-header__brand {
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 22px;
}
.main-nav {
display: inline-block;
text-align: right;
width: calc(100% - 74px);
vertical-align: middle;
}
.main-nav__items {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav__item {
display: inline-block;
margin: 0 16px;
}
.main-nav__item a {
text-decoration: none;
color: #0e4f1f;
font-weight: bold;
padding: 3px 0;
}
.main-nav__item a:hover,
.main-nav__item a:active {
color: white;
border-bottom: 5px solid white;
}
.main-nav__item--cta a {
color: white;
background: #ff1b68;
padding: 8px 16px;
border-radius: 8px;
}
.main-nav__item--cta a:hover,
.main-nav__item--cta a:active {
color: #ff1b68;
background: white;
border: none;
}
.main-footer {
background: black;
padding: 32px;
margin-top: 48px;
}
.main-footer-links {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
.main-footer-link {
display: inline-block;
margin: 0 16px;
}
.main-footer-link a {
color: white;
text-decoration: none;
}
.main-footer-link a:hover,
.main-footer-link a:active
{ color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>uHost</title>
<link rel="shortcut icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="main-header">
<div>
<a href="index.html" class="main-header__brand">
uHost
</a>
</div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
<a href="packages/index.html">Packages</a>
</li>
<li class="main-nav__item">
<a href="customers/index.html">Customers</a>
</li>
<li class="main-nav__item main-nav__item--cta">
<a href="start-hosting/index.html">Start Hosting</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="product-overview">
<h1>Get the freedom you deserve.</h1>
</section>
<section id="plans">
<h1 class="section-title">Choose Your Plan</h1>
<div>
<!--Plan One-->
<article class="plan">
<h1 class="plan__title">Free</h1>
<h2 class="plan__price">£0/month</h2>
<h3>For Hobby Projects or Small Teams</h3>
<ul id="Planlist">
<div>
<li>1 Workspace</li>
<li>Unlimited Traffic</li>
<li>10GB Storage</li>
<li>Online Forum Support</li>
</div>
</ul>
<div>
<Button class="button">Choose Plan</Button>
</div>
</article>
<!--Plan Two-->
<article class="plan plan--highlighted">
<h1 class="plan__annotation">RECOMMENDED</h1>
<h1 class="plan__title">PLUS</h1>
<h2 class="plan__price">£29.99/month</h2>
<h3>For Ambitious Projects</h3>
<ul id="Planlist">
<div>
<li>5 Workspace</li>
<li>Unlimited Traffic</li>
<li>100GB Storage</li>
<li>Telephone and Email Support</li>
</div>
</ul>
<div>
<Button class="button">Choose Plan</Button>
</div>
</article>
<!--Plan Three-->
<article class="plan">
<h1 class="plan__title">Snoopsy Ninja Mode</h1>
<h2 class="plan__price">£99.99/month</h2>
<h3>Your Enterprise Solution</h3>
<ul id="Planlist">
<div>
<li>100 Workspace</li>
<li>Unlimited Traffic</li>
<li>5TB Storage</li>
<li>24/7 Pooky Ninja Support</li>
</div>
</ul>
<div>
<Button class="button">Choose Plan</Button>
</div>
</article>
</div>
</section>
<section id="Key-Features">
<h1 class="SectionFeatures-Title">Many Good Reasons to Stick Around</h1>
<ul class="Key-Feature-List">
<li class="Key-Feature-Style">
<div class="Key-Feature-Image">
</div>
<p>3,857,000 Trusting Customers</p>
</li>
<li class="Key-Feature-Style">
<div class="Key-Feature-Image">
</div>
<p>99.999% Uptime Guarantee</p>
</li>
<li class="Key-Feature-Style">
<div class="Key-Feature-Image">
</div>
<p>Lightning Fast CDN</p>
</li>
</ul>
</section>
</main>
</body>
<footer class="main-footer">
<nav>
<ul class"main-footer-links">
<li class="main-footer-link">
<a href="#">Support</a>
</li>
<li class="main-footer-link">
<a href="#">Terms of Use</a>
</li>
</ul>
</nav>
</footer>
</html>
答案 0 :(得分:3)
您的班级名称定义中存在错误,请替换:
<ul class"main-footer-links">
与
<ul class="main-footer-links">
您错过了=号:)
答案 1 :(得分:1)
您忘记了等号'='
将<ul class"main-footer-links">
更改为<ul class="main-footer-links">
答案 2 :(得分:0)
@NoobLearns请在类text-align: center
中包括css属性.main-footer{ } or .main-footer-links{ }
,这将使列表项居中对齐,并使用更好的代码编辑器(例如vscode
)来避免诸如遗漏之类的错误=
等,如此处其他人所建议。
.Key-Feature-List,
.Key-Feature-Style,
.plan {
display: inline-block;
text-align: center
}
#Planlist,
.Key-Feature-List,
.Key-Feature-Style,
.plan,
.section-title {
text-align: center
}
* {
box-sizing: border-box
}
body {
font-family: Montserrat, sans-serif;
margin: 0
}
#product-overview {
background: url(freedom.jpg);
width: 100%;
height: 528px;
padding: 10px
}
.section-title {
color: #2ddf5c
}
#product-overview h1 {
color: #fff;
font-family: Anton, sans-serif
}
.plan {
Background: #d5ffdc;
padding: 16px;
margin: 8px;
width: 30%;
vertical-align: middle
}
.plan--highlighted {
background: #19b84c;
color: #fff;
box-shadow: 1px 2px 10px 10px rgba(0, 0, 0, .5)
}
.plan__annotation {
background: #fff;
border-radius: 10px;
border: 2px solid #000;
color: #006400;
padding: 8px;
box-shadow: 2px 2px 2px 2px rgba (0, 0, 0, .75)
}
.plan__title {
color: #0e4f1f
}
.plan__price {
color: #858585
}
.plan--highlighted .plan__title {
color: #fff
}
.plan--highlighted .plan__price {
color: #0e4f1f
}
#Planlist {
list-style-type: none;
margin: 0;
padding: 0;
line-height: 2
}
.button {
background: #0e4f1f;
color: #fff;
font: inherit;
border: 2px solid #0e4f1f;
border-radius: 10px;
padding: 8px;
margin: 10px 0;
font-weight: 700;
cursor: pointer
}
.button:active,
.button:hover {
background: #fff;
color: #0e4f1f
}
.button:focus {
outline: 0
}
#Key-Features {
background: #ff1b68;
margin-top: 80px;
padding: 60px
}
#Key-Features .SectionFeatures-Title {
color: #fff;
margin: 32px;
text-align: center
}
.Key-Feature-List {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
align-content: center
}
.Key-Feature-Style {
vertical-align: top;
padding: 16px;
margin: 8px;
width: 30%;
color: #fff;
font-size: 20px;
font-weight: bolder
}
.main-header>div,
.main-nav {
vertical-align: middle;
display: inline-block
}
.main-header__brand,
.main-nav__item a {
color: #0e4f1f;
font-weight: 700;
text-decoration: none
}
.Key-Feature-Image {
display: inline-block;
background: #ffcede;
width: 128px;
height: 128px;
border: 2px solid #424242;
border-radius: 50%;
margin: auto
}
.main-header {
width: 100%;
background: #2ddf5c;
padding: 8px 16px
}
.main-header__brand {
font-size: 22px
}
.main-nav {
text-align: right;
width: calc(100% - 74px)
}
.main-nav__items {
margin: 0;
padding: 0;
list-style: none
}
.main-nav__item {
display: inline-block;
margin: 0 16px
}
.main-nav__item a {
padding: 3px 0
}
.main-nav__item a:active,
.main-nav__item a:hover {
color: #fff;
border-bottom: 5px solid #fff
}
.main-nav__item--cta a {
color: #fff;
background: #ff1b68;
padding: 8px 16px;
border-radius: 8px
}
.main-nav__item--cta a:active,
.main-nav__item--cta a:hover {
color: #ff1b68;
background: #fff;
border: none
}
.main-footer {
background: #000;
padding: 32px;
margin-top: 48px;
text-align: center
}
.main-footer-links {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center
}
.main-footer-link {
display: inline-block;
margin: 0 16px
}
.main-footer-link a {
color: #fff;
text-decoration: none
}
.main-footer-link a:active,
.main-footer-link a:hover {
color: #ccc
}
<header class="main-header">
<div><a href="index.html" class="main-header__brand">
uHost
</a></div>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item"><a href="packages/index.html">Packages</a></li>
<li class="main-nav__item"><a href="customers/index.html">Customers</a></li>
<li class="main-nav__item main-nav__item--cta"><a href="start-hosting/index.html">Start Hosting</a></li>
</ul>
</nav>
</header>
<main>
<section id="product-overview">
<h1>Get the freedom you deserve.</h1>
</section>
<section id="plans">
<h1 class="section-title">Choose Your Plan</h1>
<div>
<article class="plan">
<h1 class="plan__title">Free</h1>
<h2 class="plan__price">£0/month</h2>
<h3>For Hobby Projects or Small Teams</h3>
<ul id="Planlist">
<div>
<li>1 Workspace</li>
<li>Unlimited Traffic</li>
<li>10GB Storage</li>
<li>Online Forum Support</li>
</div>
</ul>
<div><Button class="button">Choose Plan</Button></div>
</article>
<article class="plan plan--highlighted">
<h1 class="plan__annotation">RECOMMENDED</h1>
<h1 class="plan__title">PLUS</h1>
<h2 class="plan__price">£29.99/month</h2>
<h3>For Ambitious Projects</h3>
<ul id="Planlist">
<div>
<li>5 Workspace</li>
<li>Unlimited Traffic</li>
<li>100GB Storage</li>
<li>Telephone and Email Support</li>
</div>
</ul>
<div><Button class="button">Choose Plan</Button></div>
</article>
<article class="plan">
<h1 class="plan__title">Snoopsy Ninja Mode</h1>
<h2 class="plan__price">£99.99/month</h2>
<h3>Your Enterprise Solution</h3>
<ul id="Planlist">
<div>
<li>100 Workspace</li>
<li>Unlimited Traffic</li>
<li>5TB Storage</li>
<li>24/7 Pooky Ninja Support</li>
</div>
</ul>
<div><Button class="button">Choose Plan</Button></div>
</article>
</div>
</section>
<section id="Key-Features">
<h1 class="SectionFeatures-Title">Many Good Reasons to Stick Around</h1>
<ul class="Key-Feature-List">
<li class="Key-Feature-Style">
<div class="Key-Feature-Image"></div>
<p>3,857,000 Trusting Customers</p>
</li>
<li class="Key-Feature-Style">
<div class="Key-Feature-Image"></div>
<p>99.999% Uptime Guarantee</p>
</li>
<li class="Key-Feature-Style">
<div class="Key-Feature-Image"></div>
<p>Lightning Fast CDN</p>
</li>
</ul>
</section>
</main>
<footer class="main-footer">
<nav>
<ul class="main-footer-links">
<li class="main-footer-link"><a href="#">Support</a></li>
<li class="main-footer-link"><a href="#">Terms of Use</a></li>
</ul>
</nav>
</footer>
答案 3 :(得分:0)
在代码中添加“ =”:
<ul class="main-footer-links">
还尝试添加文本以使其对齐:
.main-footer-link {
display: inline-block;
margin: 0 16px;
text-align: center;
}