Question

我有一些列表项，其中包含并排对齐的图像和文本。图片部分始终保持相同的宽度（以px为单位），而我希望其旁边的框填充其余的空间。

在我的示例中，它工作正常。但是，如果我希望列表项成为链接

.advanced-list {
  padding-left: 0;
  list-style: none;
}

.advanced-list li {
  display: flex;
  min-height: 80px;
  zoom: 1;
  flex-direction: row;
  background-color: #f5f5f5; 
}

.advanced-list li .list-img {
  display: block;
  height: 235px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  flex: 0 0 235px;
  order: 1;
}

.advanced-list li .list-content {
  padding: 15px;
  line-height: 1.3333333;
  order: 2;
}

.advanced-list li .list-content .list-header {
  margin-top: 0;
  margin-bottom: 5px;
}

.advanced-list li .advanced-link {
  display: flex;
  color: #252525;
  text-decoration: none;
  flex-direction: row;
}

.advanced-list li+li {
  margin-top: 5px;
}

<ul class="advanced-list">
  <li>
    <div class="list-content">
      <h4 class="list-header">List item without link</h4> Lorem ipsum dolor...
    </div>
    <div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"></div>
  </li>
  <li>
    <a href="#" class="advanced-link">
      <div class="list-content">
        <h4 class="list-header">List item with link inside</h4> Short text - keep width 100%.
      </div>
      <div class="list-img" style="background-image: url('https://placehold.it/550x300?text=Img:+550+x+300')"></div>
    </a>
  </li>
</ul>

通过在其周围添加链接，出现了问题：

See this fiddle-第二个列表项有一个链接-应该如何在此处应用flexbox，以使文本占据剩余的宽度？

Answer 1

您的.advanced-link锚元素位于flex容器中。所以它不会有完整的宽度。

设置：

.advanced-list li .advanced-link {
    width: 100%;
}

或

.advanced-list li .advanced-link {
  flex: 1
}

使用flexbox列出项目-有时还有一个链接

1 个答案: