html - 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-value 使 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;
}