私のHTMLコードでliを使用して5つのものをリストしています。各リー内の私は、上記のように右側ポジション2つのスパン要素が反対方向にあります。
|a b|
に行くためにいくつかの左側に行く私はaをしたいa:b
<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
などのデータとbを持っています。どのように私はCSSでそれを行うことができます
フレックスボックスはそれを行うことができます。
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テーブル、正確他のオプションと同じレイアウトではありません。スパンにフロートを使用することにより
Demo 。
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;
}<ul>
<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
</ul>ul {
width: 100px;
}
li {
list-style: none;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}<!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>