위치 내 두 방향으로 반대 방향으로 스팬 요소

내 물건을 li로 사용하는 5 가지를 나열 함. 각 리 안에 내가 위에서와 마찬가지로 오른쪽위치 내 두 방향으로 반대 방향으로 스팬 요소

|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를

출처

2016-06-21 Skeptical Geek

플렉스 박스 그렇게 할 수 있습니다.

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 테이블

이 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>

, 당신이 볼 수 있듯이,하지 정확하게이 다른 옵션과 동일한 배치. 스팬에 플로트를 사용하여

출처

2016-06-21 09:36:30

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>

출처

2016-06-21 09:40:07 aldanux

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>

출처

2016-06-21 09:40:40

위치 내 두 방향으로 반대 방향으로 스팬 요소

답변

관련 문제