После установки flex-based для потомка списка класса «mode-container» равным 30%, а для списка-содержащего элемента order-list - { justify-content: space-between;}.Насколько я понимаю, 10% пространства, оставшегося между элементами элемента, будет равномерно распределено, выступая в качестве поля.Однако при развертывании между элементами списка нет поля.
Я пытался устранить стили, такие как позиционирование для <article>, но ничего не изменилось.У кого-нибудь есть идеи, почему это не работает?(извините за пример длинного кода, я не знаю, что с ним возиться, поэтому я должен поместить все в таблицу для контекста)
/* external stylesheet but placed here for readability */
#container {
position: relative;
margin-left: 20%;
margin-right: 20%;
}
header {
text-align: center;
}
.form-row {
display: flex;
}
.form-row>input,
.form-row>textarea {
flex: 1;
margin-bottom: 10px;
}
aside {
float: left;
position: absolute;
width: 30%;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
text-align: center;
background-color: antiquewhite;
}
aside>h3 {
margin: 10px;
}
aside>input[type="submit"] {
margin-bottom: 10px;
}
article {
float: right;
box-sizing: border-box;
width: 80%;
padding-left: 15%;
padding-right: 15%;
}
#main-text {
background-color: green;
}
.modes-container {
background-color: rgba(56, 211, 211, 0.8);
}
.modes-container>ol {
display: flex;
justify-content: space-between;
/*supposedly provides spacing between <li> boxes but doesn't work yet*/
}
.modes-container>ol>li {
box-sizing: border-box;
padding: 20px;
flex-basis: 30%;
/*doesn't work either*/
list-style-position: inside;
}
.modes-container li:nth-child(1) {
background-color: rgba(128, 170, 206, 0.8)
}
.modes-container li:nth-child(2) {
background-color: rgba(206, 128, 171, 0.8)
}
.modes-container li:nth-child(3) {
background-color: rgba(164, 128, 206, 0.8)
}
.modes-container li:nth-child(4) {
background-color: rgba(205, 206, 128, 0.8)
}
.modes-container li:nth-child(5) {
background-color: rgba(206, 159, 128, 0.8)
}
footer {
clear: both;
}
/* visualization purpose */
header,
article,
aside,
footer,
#container {
border-style: solid;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<div id="container">
<header>
<h1>Welcome Music Jedi!</h1>
</header>
<aside>
<h3>Feedbacks are welcomed!</h3>
<div class="form-row">
<input type="text" name="first-name" placeholder="First Name" />
</div>
<div class="form-row">
<textarea rows="4" name="description" placeholder="Your thoughts?"></textarea>
</div>
<input type="submit" />
</aside>
<article id="main-text">
<h3>Problems with Current Methods</h3>
<p>Learning the modes has been one of the most mystifying experience amongst music students. These students then become teachers who will then pass on the knowledge and perhaps some of the confusion, thus perpetuating rather than fixing the problem
in educating modal playing. Here I will teach you the modes the right way which starts with how YOU the listeners hear music rather than visually what the modes are based on, thus making the modes useful in a musical context rather than inapplicable
knowledge.
</p>
<h3>What You Will Learn</h3>
<ol>
<li><a href="">Redefining the modes</a></li>
<li>Relationship to the parent scales as a utility not as a foundation</li>
<li>Musical examples in classical and pop music</li>
<li>Application in composition and improvisation</li>
</ol>
<ol></ol>
</article>
<article class="modes-container">
<ol type="I">
<li>I</li>
<li>D</li>
<li>P</li>
<li>L</li>
<li>M</li>
</ol>
</article>
<footer>Built by Don</footer>
</div>
</body>
</html>