我正在尝试对齐section
元素,如下所示
display: inline-block;
属性连续,这就是我所看到的
出于某种原因,我似乎无法让它发挥作用。我在下面包含了HTML和CSS代码。
如果有人可以提供建议,那将会很有帮助。
body {
background-color: #edeff2;
margin: 25px;
}
header {
margin-top: 15px;
padding-bottom: 8px;
padding-top: 8px;
background-color: #b8babc;
text-align: center;
color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
/*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}
nav {
padding-bottom: 5px;
}
a {
text-decoration: none;
}
a:hover {
border: 1px solid;
}
h2 {
color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;
}
section {
display: inline-block;
padding-top: 30px;
padding-bottom: 30px;
float: left;
margin-right: 2%;
}
ul {
list-style-type: none;
}
progress {
color: #5ff4ef;
font-size: .7em;
line-height: 1.5em;
text-indent: .5em;
width: 15em;
height: 1.8em;
border: 1px solid #5ff4ef;
background: #5ff4ef;
}
details {
font-size: 1.2em;
color: #028402;
}
details p {
font-style: italic;
}
footer {
background-color: #b8babc;
font-size: 1.2em;
clear: both;
}
img {
width: 105px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colleen</title>
<!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>ALOK</h1>
<nav>
<a href = "">One</a>
<a href = "">Two</a>
<a href = "">Three</a>
<a href = "">Four</a>
</nav>
</header>
<section class="half">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</section>
<section class="half">
<h2>Achievements</h2>
<p> Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/> Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
</section>
<section class = "whole">
<h2>More About Me</h2>
<details open><summary>My Childhood</summary>
<p>I grew up in Bangalore India. I lived near a Mango Grove and I used to steal a lot of them. </details>
</section>
<footer>
<p><img src = "http://www.intro-webdesign.com/images/newlogo.png" alt = "logo"/> This page was created by your name & Colleen van Lent. To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a>.</p>
</footer>
</body>
</html>
&#13;
答案 0 :(得分:1)
您需要添加width
,例如30%
:
body {
background-color: #edeff2;
margin: 25px;
}
header {
margin-top: 15px;
padding-bottom: 8px;
padding-top: 8px;
background-color: #b8babc;
text-align: center;
color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
/*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}
nav {
padding-bottom: 5px;
}
a {
text-decoration: none;
}
a:hover {
border: 1px solid;
}
h2 {
color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;
}
section {
display: inline-block;
width: 30%;
padding-top: 30px;
padding-bottom: 30px;
float: left;
margin-right: 2%;
}
ul {
list-style-type: none;
}
progress {
color: #5ff4ef;
font-size: .7em;
line-height: 1.5em;
text-indent: .5em;
width: 15em;
height: 1.8em;
border: 1px solid #5ff4ef;
background: #5ff4ef;
}
details {
font-size: 1.2em;
color: #028402;
}
details p {
font-style: italic;
}
footer {
background-color: #b8babc;
font-size: 1.2em;
clear: both;
}
img {
width: 105px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colleen</title>
<!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>ALOK</h1>
<nav>
<a href = "">One</a>
<a href = "">Two</a>
<a href = "">Three</a>
<a href = "">Four</a>
</nav>
</header>
<section class="half">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</section>
<section class="half">
<h2>Achievements</h2>
<p> Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/> Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
</section>
<section class = "whole">
<h2>More About Me</h2>
<details open><summary>My Childhood</summary>
<p>I grew up in Bangalore India. I lived near a Mango Grove and I used to steal a lot of them. </details>
</section>
<footer>
<p><img src = "http://www.intro-webdesign.com/images/newlogo.png" alt = "logo"/> This page was created by your name & Colleen van Lent. To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a>.</p>
</footer>
</body>
</html>
答案 1 :(得分:0)
我对你的html和css的section标签进行了一些更改。它会为你工作
section.half {
display: inline-block;
padding-top: 30px;
padding-bottom: 30px;
float: left;
margin-right: 2%;
}
ul {
list-style-type: none;
}
&#13;
<section class="half">
<h2>Favorite Foods</h2>
<ul>
<li>Apples</li>
<li>Pizza</li>
<li>Crab</li>
<li>Chocolate Cake</li>
</ul>
</section>
<section class="half">
<h2>Achievements</h2>
<p> Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/> Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
</section>
<section class = " half whole">
<h2>More About Me</h2>
<details open><summary>My Childhood</summary>
<p>I grew up in Bangalore India. I lived near a Mango Grove and I used to steal a lot of them. </details>
</section>
&#13;