Question

我在html代码中使用li列出了5件事。在每个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>

或漂浮

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表格的精确布局与其他选项不同。

Answer 2

Demo

＆＃13;

ul {
  width: 100px;
}

li {
  list-style: none;
  text-align: center; 
}

.left {
  float: left;
}

.right {
  float: right;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li class="subtitle"> <span class="left">|a </span>: <span class="right">b|</span></li>
<li class="subtitle"> <span class="left">|c </span>: <span class="right">d|</span></li>
  </ul>
</body>
</html>

＆＃13;

Answer 3

在span上使用float。

＆＃13;

ul{
  list-style-type:none;
  border:1px solid #000;
  padding:0px;
}
li span:nth-child(1){
  float:left;
}
li span:nth-child(2){
  float:right;
}

＆＃13;

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

＆＃13;

在li内部相反方向放置两个跨度元件

3 个答案: