html - 在 li 内以相反方向放置两个 span 元素

Question

我在我的 html 代码中列出了 5 个使用 li 的东西。在每个 li 中，我都有一些数据，例如 a:b

<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>

我想让a到左边，b到右边

|a                        b|

如上。我怎样才能在 css 中做到这一点

Answer 1

Flexbox 可以做到这一点。

ul {
  width: 80%;
  border:1px solid grey;
  margin: 1em auto;
  padding:0;
}

.subtitle {
  display: flex;
  
  justify-content: space-between ;
}

span {
  background:#c0ffee;
  }

<ul>
  <li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
</ul>

或者 float

ul {
  width: 80%;
  border: 1px solid grey;
  margin: 1em auto;
  padding: 0;
}

.subtitle {
 overflow:hidden; /* quick clearfix;*/
  text-align:center;
}
span {
  background: #c0ffee;
}

.subtitle span:first-child {
  float: left;
}

.subtitle span:last-child {
  float: right;
}

<ul>
  <li class="subtitle"> <span>a </span>: <span>b</span></li>
  <li class="subtitle"> <span>c </span>: <span>d</span></li>
</ul>

最后，也许不是正是您所追求的:

CSS 表格

ul {
  width: 80%;
  border: 1px solid grey;
  margin: 1em auto;
  padding: 0;
}
.subtitle {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
span {
  background: #c0ffee;
  display: table-cell;
}
.subtitle span:first-child {
  text-align: left;
}
.subtitle span:last-child {
  text-align: right;
}

<ul>
  <li class="subtitle"> <span>a </span>: <span>b</span>
  </li>
  <li class="subtitle"> <span>c </span>: <span>d</span>
  </li>
</ul>

如您所见，这些 CSS 表的布局完全与其他选项不一样。