CSS显示内嵌属性不是为我工作
问题描述：
我试图对准section元素通过应用display: inline-block;属性如下所示CSS显示内嵌属性不是为我工作
在一排，这是我看到
由于某种原因，我似乎无法得到它的工作。我已经在下面包含了HTML和CSS代码。
如果有人可以请教咨询，这将是很大的帮助。
body {
\t background-color: #edeff2;
\t margin: 25px;
}
header {
\t margin-top: 15px;
\t padding-bottom: 8px;
\t padding-top: 8px;
\t background-color: #b8babc;
\t text-align: center;
\t color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
\t /*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}
nav {
\t padding-bottom: 5px;
}
a {
\t text-decoration: none;
}
a:hover {
\t border: 1px solid;
}
h2 {
\t color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;
}
section {
\t display: inline-block;
\t padding-top: 30px;
\t padding-bottom: 30px;
\t float: left;
\t 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 {
\t font-size: 1.2em;
\t color: #028402;
}
details p {
\t font-style: italic;
}
footer {
\t background-color: #b8babc;
\t font-size: 1.2em;
\t clear: both;
}
img {
\t width: 105px;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Colleen</title>
\t <!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
\t <link rel="stylesheet" href="style.css">
</head>
<body>
\t <header>
\t <h1>ALOK</h1>
\t \t \t <nav>
\t \t \t <a href = "">One</a>
\t \t \t <a href = "">Two</a>
\t \t \t <a href = "">Three</a>
\t \t \t <a href = "">Four</a>
\t \t \t </nav>
\t </header>
\t <section class="half">
\t \t <h2>Favorite Foods</h2>
\t \t <ul>
\t \t \t <li>Apples</li>
\t \t \t <li>Pizza</li>
\t \t \t <li>Crab</li>
\t \t \t <li>Chocolate Cake</li>
\t \t </ul>
\t </section>
\t \t <section class="half">
\t \t <h2>Achievements</h2>
\t \t <p> \t Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/> \t \t Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
\t \t </section>
\t \t <section class = "whole">
\t \t <h2>More About Me</h2>
\t \t <details open><summary>My Childhood</summary>
\t \t <p>I grew up in Bangalore India. I lived near a Mango Grove and I used to steal a lot of them. </details>
\t \t </section>
\t
\t \t <footer>
\t \t <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>
\t </footer>
</body>
</html>
答
我已在你的HTML和部分标签的CSS的一些变化。它会为你工作
section.half {
\t display: inline-block;
\t padding-top: 30px;
\t padding-bottom: 30px;
\t float: left;
\t margin-right: 2%;
}
ul {
list-style-type: none;
}\t <section class="half">
\t \t <h2>Favorite Foods</h2>
\t \t <ul>
\t \t \t <li>Apples</li>
\t \t \t <li>Pizza</li>
\t \t \t <li>Crab</li>
\t \t \t <li>Chocolate Cake</li>
\t \t </ul>
\t </section>
\t \t <section class="half">
\t \t <h2>Achievements</h2>
\t \t <p> \t Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/> \t \t Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
\t \t </section>
\t \t <section class = " half whole">
\t \t <h2>More About Me</h2>
\t \t <details open><summary>My Childhood</summary>
\t \t <p>I grew up in Bangalore India. I lived near a Mango Grove and I used to steal a lot of them. </details>
\t \t </section>+0
这也适用。谢谢。 –
答
您需要添加一个width，像30%：
body {
\t background-color: #edeff2;
\t margin: 25px;
}
header {
\t margin-top: 15px;
\t padding-bottom: 8px;
\t padding-top: 8px;
\t background-color: #b8babc;
\t text-align: center;
\t color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
\t /*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}
nav {
\t padding-bottom: 5px;
}
a {
\t text-decoration: none;
}
a:hover {
\t border: 1px solid;
}
h2 {
\t color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;
}
section {
\t display: inline-block;
width: 30%;
\t padding-top: 30px;
\t padding-bottom: 30px;
\t float: left;
\t 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 {
\t font-size: 1.2em;
\t color: #028402;
}
details p {
\t font-style: italic;
}
footer {
\t background-color: #b8babc;
\t font-size: 1.2em;
\t clear: both;
}
img {
\t width: 105px;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Colleen</title>
\t <!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
\t <link rel="stylesheet" href="style.css">
</head>
<body>
\t <header>
\t <h1>ALOK</h1>
\t \t \t <nav>
\t \t \t <a href = "">One</a>
\t \t \t <a href = "">Two</a>
\t \t \t <a href = "">Three</a>
\t \t \t <a href = "">Four</a>
\t \t \t </nav>
\t </header>
\t <section class="half">
\t \t <h2>Favorite Foods</h2>
\t \t <ul>
\t \t \t <li>Apples</li>
\t \t \t <li>Pizza</li>
\t \t \t <li>Crab</li>
\t \t \t <li>Chocolate Cake</li>
\t \t </ul>
\t </section>
\t \t <section class="half">
\t \t <h2>Achievements</h2>
\t \t <p> \t Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/> \t \t Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
\t \t </section>
\t \t <section class = "whole">
\t \t <h2>More About Me</h2>
\t \t <details open><summary>My Childhood</summary>
\t \t <p>I grew up in Bangalore India. I lived near a Mango Grove and I used to steal a lot of them. </details>
\t \t </section>
\t
\t \t <footer>
\t \t <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>
\t </footer>
</body>
</html>+0
这可以工作。谢谢。 –
我没有看到一半或全部类别。 –
它看起来对我很有用。你想要发生什么？ –
我想要“更多关于我”与“最喜欢的食物”和“成就”排在同一行 –