如何使用 css space 输出列表中的 svg

Question

我正在尝试 space 沿黑条 'categories' 并在中间放置分隔线 spacers。 'categories' 在列表中。我能够水平放置它们，但无法将它们隔开。我将如何去做这件事？对于视觉效果，我在下面的插画中模拟了想要的结果。

这是我目前的情况：

HTML:

<div class="ride-stats">
  <div class="ride-stats-content">
    <ul>
      <li>
        <div class="ride-stats-col ride-stats-distance">
          <span class="icon-distance">
            <svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.86">
              <g id="prefix__Layer_2" data-name="Layer 2">
                  <g id="prefix__Layer_1-2" data-name="Layer 1">
                      <path class="prefix__cls-1"
                          d="M3.33 30a2.5 2.5 0 012.49-2.49h6.74a5.83 5.83 0 000-11.65h-.84v3.33h.84a2.5 2.5 0 010 5H5.82a5.82 5.82 0 000 11.64H25v-3.29H5.82A2.5 2.5 0 013.33 30zM6.73 0A6.73 6.73 0 000 6.73c0 5 6.73 12.5 6.73 12.5s6.73-7.45 6.73-12.5A6.73 6.73 0 006.73 0zm0 9.13a2.4 2.4 0 112.4-2.4 2.39 2.39 0 01-2.4 2.4zM30 16.64a6.73 6.73 0 00-6.73 6.73c0 5 6.73 12.49 6A6.72 6.72 0 0030 16.64zm0 9.13a2.41 2.41 0 112.4-2.4 2.41 2.41 0 01-2.4 2.4z" />
                  </g>
              </g>
          </svg> 
          </span>
          <span class="ride-stats-label">Distance:</span>
          <span> <h3>19.5</h3> <span>km</span></span>
        </div>
      </li>
      <li>
        <div class="ride-stats-col ride-stats-elevation">
          <span class="icon-elevation">
            <svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 18.51">
              <g data-name="Layer 2">
                  <path d="M36.75 18.52H0l6.32-9.26L12.63 0l6.32 9.26 1.53 2.24.19-.26 5.36-7.27 10.72 14.55z"
                      data-name="Layer 1" />
              </g>
          </svg>
          </span>    
          <span class="ride-stats-label">Elevation:</span>
          <span> <h3>120</h3>
          <span>m</span>
          </span>
        </div>
      </li>

      <li>
        <div class="ride-stats-col ride-stats-difficulty">
          <span class="icon-difficulty">   
            <svg height=10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.87">
              <g id="prefix__Layer_2" data-name="Layer 2">
                  <g id="prefix__Layer_1-2" data-name="Layer 1">
                      <path class="prefix__cls-1"
                          d="M27.83 0h8.92v35.86h-8.92zM0 23.91h8.92v11.95H0zM13.92 11.97h8.92v23.9h-8.92z" />
                  </g>
              </g>
            </svg>
          </span>
          <span class="ride-stats-label">Difficulty:</span>
          <span> <h3>Easy</h3></span>
        </div>
      </li>
    </ul>
  </div>  
</div>

CSS:

.ride-stats {
  color: white;
  margin: 0;
  position: relative;
}

.ride-stats svg{
  fill: red;
}

.ride-stats h3 {
  font-family: sans-serif;
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 0;
}
.ride-stats-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto 0 auto;
  max-width: 1100px;
  background: #282828;
  padding: 20px 0 20px 0;
}

ul li{
  display: inline-flex;
  text-align: center;
  margin: 0 0 0px 0;
}

* {
  box-sizing: border-box;
}

ul li .ride-stats-col{
  text-decoration: none;
  display: flexbox;
}

.ride-stats-col {
  position: relative;
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;    padding: 15px 0;
}

.ride-stats .icon-distance, .ride-stats .icon-elevation, .ride-stats .icon-difficulty{
  display: block;
  min-height: 55px;
}

Answer 1

您的问题是您设置的 display:flex 不正确 class，您必须申请 ul 而不是

代码段 - CSS 有所改进

* {
  box-sizing: border-box;
  margin: 0
}

.ride-stats {
  color: white;
}

.ride-stats svg {
  fill: red;
}

.ride-stats h3 {
  font-family: sans-serif;
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
}

.ride-stats-content {
  margin: 0 auto;
  max-width: 1100px;
  background: #282828;
}

.ride-stats-content ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  list-style: none;
}

[class^='icon-'] {
  display: block;
  min-height: 55px;
}

.ride-stats-label {
  display: block
}

<div class="ride-stats">
  <div class="ride-stats-content">
    <ul>
      <li>
        <div class="ride-stats-col ride-stats-distance">
          <span class="icon-distance">
            <svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.86">
              <g id="prefix__Layer_2" data-name="Layer 2">
                  <g id="prefix__Layer_1-2" data-name="Layer 1">
                      <path class="prefix__cls-1"
                          d="M3.33 30a2.5 2.5 0 012.49-2.49h6.74a5.83 5.83 0 000-11.65h-.84v3.33h.84a2.5 2.5 0 010 5H5.82a5.82 5.82 0 000 11.64H25v-3.29H5.82A2.5 2.5 0 013.33 30zM6.73 0A6.73 6.73 0 000 6.73c0 5 6.73 12.5 6.73 12.5s6.73-7.45 6.73-12.5A6.73 6.73 0 006.73 0zm0 9.13a2.4 2.4 0 112.4-2.4 2.39 2.39 0 01-2.4 2.4zM30 16.64a6.73 6.73 0 00-6.73 6.73c0 5 6.73 12.49 6A6.72 6.72 0 0030 16.64zm0 9.13a2.41 2.41 0 112.4-2.4 2.41 2.41 0 01-2.4 2.4z" />
                  </g>
              </g>
          </svg> 
          </span>
          <span class="ride-stats-label">Distance:</span>
          <span> <h3>19.5</h3> <span>km</span></span>
        </div>
      </li>
      <li>
        <div class="ride-stats-col ride-stats-elevation">
          <span class="icon-elevation">
            <svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 18.51">
              <g data-name="Layer 2">
                  <path d="M36.75 18.52H0l6.32-9.26L12.63 0l6.32 9.26 1.53 2.24.19-.26 5.36-7.27 10.72 14.55z"
                      data-name="Layer 1" />
              </g>
          </svg>
          </span>
          <span class="ride-stats-label">Elevation:</span>
          <span> <h3>120</h3>
          <span>m</span>
          </span>
        </div>
      </li>

      <li>
        <div class="ride-stats-col ride-stats-difficulty">
          <span class="icon-difficulty">   
            <svg height=10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.87">
              <g id="prefix__Layer_2" data-name="Layer 2">
                  <g id="prefix__Layer_1-2" data-name="Layer 1">
                      <path class="prefix__cls-1"
                          d="M27.83 0h8.92v35.86h-8.92zM0 23.91h8.92v11.95H0zM13.92 11.97h8.92v23.9h-8.92z" />
                  </g>
              </g>
            </svg>
          </span>
          <span class="ride-stats-label">Difficulty:</span>
          <span> <h3>Easy</h3></span>
        </div>
      </li>
    </ul>
  </div>
</div>

如何使用 css space 输出列表中的 svg

How to space out svgs in a list using css

css

svg

html-lists

代码段 - CSS 有所改进