-1
display: inline-block;プロパティを適用することにより、行のCSSの表示インラインプロパティは私のために働いていない
以下のように私はsection要素を整列させるためにしようとしています、これは私が見たものである
何らかの理由で私は動作させることができないようです。私は以下の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>
をうまくいきます。 –
それは私に働いているように見えます。あなたは何をしたいですか？ –
「お気に入りの食べ物」と「成果」と同じ列に「私の詳細」が揃うようにしたい –