li內的右對齊div應該填充高度

Question

我有以下簡單的代碼：

<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 -height設置為px div.stripe會使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;
}