오른쪽 정렬 DIV 높이 작성해야

Question

나는 코드의 다음과 같은 간단한 조각이 :

<li> 
    <div class="stripe"></div> 
    <a href="#">linktext</a> 
</li> 

내 목표는 고정을하면서 높이를 채우는 li의 오른쪽에있는 div을하는 것입니다 너비는 10px입니다. 나는이 CSS를 시도했지만 작동하지 않습니다 : 일이 될 것이다 않습니다

li { 
    display: block; 
} 
.stripe { 
    float: right; 
    width: 10px; 
    height: 100%; 
} 

뭔가 :

li { 
    position: relative; 
} 
.stripe { 
    position: absolute; 
    height: 100%; 
    width: 10px; 
    right: 0; 
} 

는 그러나, 나는 CSS의 위치가 여기에 속성을 사용하지 않으려합니다. 어딘가에 특수한 유형의 display 속성을 사용하여 가능해야한다고 생각했지만 어디에 있는지 알지 못했습니다. 나는 또한 height: 100%;이 부모 높이가 필요하다는 것을 읽었습니다. 사실, li - 높이를 px 값으로 설정하면 div.stripe은 그 높이를 갖지만 내 li의 높이는 가변적이어야합니다. 이 작업을 수행하는 간단한 방법이 있습니까?

Answer 1

다음은 최신 flexbox 사양을 사용하고 최신 브라우저가 필요한 해결책입니다 : http://jsfiddle.net/a956kdfL/.

HTML :

<ul> 
    <li> 
     <div></div> 
     <a href = "">linktext</a> 
    </li> 
</ul> 

CSS :

* { 
    margin: 0; 
    padding: 0; 
} 

ul { 
    list-style-type: none; 
} 

body { 
    padding: 10px; 
} 

ul > li { 
    display: flex; 
    flex-flow: row wrap; 
} 

ul > li > div { 
    flex: 0 0 10px; 
    outline: 1px solid red; 
} 

가 여기에 테이블을 사용하는 간단한 솔루션입니다 : http://jsfiddle.net/g7pxLcge/ 및 이전 버전의 브라우저에서 작동합니다.

CSS :

이

* { 
    margin: 0; 
    padding: 0; 
} 

ul { 
    list-style-type: none; 
} 

body { 
    padding: 10px; 
} 

ul > li { 
    display: table; 
} 

ul > li > div { 
    display: table-cell; 
    width: 10px; 
    outline: 1px solid red; 
} 

ul > li > a { 
    display: table-cell; 
}