右對齊的div應填寫高度

，我有以下簡單的代碼：右對齊的div應填寫高度

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

我的目標是讓div對li的右側，同時具有固定盡顯其高度寬度，比如說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屬性的位置。我認爲它應該可能通過在某處使用特殊類型的顯示屬性，但我還沒有弄清楚在哪裏。我還讀到height: 100%;需要父母身高才能工作。確實如此，將li-高度設置爲px-值使得div.stripe具有該高度，但是我的li應該是高度可變的。有沒有簡單的方法來完成這項工作？

來源

2014-08-30 LuLeBe

看看這個 http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents -div-without-specify-parents-heigh – lukadante3 2014-08-30 13:57:45

@ lukadante3我完全沒有看到與高度相等的列問題的聯繫，但當然，這非常相似。這基本上意味着這個問題沒有簡單的答案。但是我記得有一個與'display：table-cell;'相關的等高列的簡單答案，這裏是否有類似的解決方案？ – LuLeBe 2014-08-30 14:10:30

也許我不明白的問題，但似乎你的CSS正在使用Chrome爲我好 - http://jsfiddle.net/a1ses1ko/1/ 我必須指定一些高度與'li'證明div實際上佔據了所有可用的高度。 – Vishu 2014-08-30 14:21:07

下面是一個使用了最新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; 
}

來源

2014-08-30 18:44:29 DRD

右對齊的div應填寫高度

回答

相關問題