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位置属性。我认为应该可以在某处使用特殊类型的display-property，但我还没弄清楚在哪里。我还读到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;
}

里面的右对齐div应该填充高度

1 个答案: