Question

我想创建一个垂直列表，其中每行缩小其宽度以完美地包含其内部内容（相对于扩展其宽度以填充容器的默认div行为）。

我想每行只有一个 HTML元素（没有额外的包装div）。

以下代码正是我想要的，但它在Safari中不起作用（bug？）。

.container {
  margin: 10px;
  border: 2px solid #999;
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 300px
}
.row-item {
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  /* this will shrink the width to the inner content
        in Chrome and Firefox, but not in Safari */
  margin-right: auto;
}

<div class='container'>
  <div class='row-item'>Item #1</div>
  <div class='row-item'>Another Item...</div>
  <div class='row-item'>Item No. 3</div>
</div>

以下是包含以上代码的代码集：http://codepen.io/anon/pen/woKYqx

我知道通过添加包装div然后在内部元素（或其他几个类似的解决方案）上使用display: inline-block来解决这个问题是微不足道的。

但是，似乎应该可以在不添加额外HTML元素的情况下解决此问题。这是一个相当简单的布局。

是否有跨浏览器方式对每行使用单个HTML元素进行此操作？

Answer 1

您正在使用margin-right: auto将元素一直推到左侧，这也会强制该项目获取其内容的宽度。

这是一个很好的方法，但正如你所指出的那样，它在Safari中失败了。

一个简单的替代方法是在flex项目上使用align-self: flex-start：

.row-item {
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  align-self: flex-start;  /* NEW */
  /* margin-right: auto;  (can be kept or removed) */
}

或者，只需在flex容器上使用align-items: flex-start。

.container {
  margin: 10px;
  border: 2px solid #999;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* NEW */
  width: 300px
}

Answer 2

你可以删除所有弹性内容并对子项使用float:left和clear:left，并在父级上使用overflow-x: hidden：

UIPicker detect tap / touch on currently selected row

Answer 3

当您使用display：flex时，您还应该使用供应商前缀。也支持旧版本的浏览器如有疑问，请查看caniuse.com

.container {
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
 display: -webkit-flex; /* NEW - Chrome */
 display: -ms-flexbox; /* TWEENER - IE 10 */
 display: flex;
 /* ETC */
}

注意：caniuse.com已经写过关于在safari中报告flexbox儿童身高的错误。

垂直元素列表，其中每行缩小其宽度以匹配内部内容

3 个答案: