Question

在将“ modes-container”类的列表后代的flex-basis设置为30％，并将包含元素的order-list设置为{ justify-content: space-between;}之后。根据我的理解，item元素之间剩余的10％的空间将被均匀地隔开，作为边距。但是，部署后，list元素之间没有空白。

我试图消除诸如<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>

Answer 1

不太确定这是否是您想要的，但请查看小提琴：

https://jsfiddle.net/MichelleFuchs/m3vnawd7/3/

这是相关的CSS：

 .modes-container{
        background-color: rgba(56, 211, 211, 0.8);
        padding: 0px;
    }
  .modes-container > ol{
        display: flex;    
        justify-content: space-between; /*supposedly provides spacing between <li> boxes but doesn't work yet*/

        padding: 0px; /*ol does have a left padding, whcih we need to remove*/
        width: 80%; /*10% space left and right*/
        margin: 0px  auto; /*horizontal centering*/
    }
    .modes-container > ol > li{     
        box-sizing: border-box;
        padding: 20px;
        list-style-position: inside;

    }

现在，模式容器具有全宽且没有填充。在其中，有序列表中，我还删除了左侧不需要的填充。它只有80％的宽度，所以有一些空白。现在，锂元素在其中正确对齐-但是，只要有足够的空间即可。他们需要自己的空间，并且会使flexbox溢出。

间距不产生边距

1 个答案: