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

概述我想创建一个垂直列表,其中每行缩小其宽度以完美地包含其内部内容(相对于扩展其宽度以填充容器的默认div行为). 我想每行只有一个HTML元素(没有额外的包装div). 下面的代码完全符合我的要求,但它在Safari中不起作用(bug？). .container { margin: 10px; border: 2px solid #999; padding: 5px; display 我想创建一个垂直列表,其中每行缩小其宽度以完美地包含其内部内容(相对于扩展其宽度以填充容器的默认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>

这是一个带有上述代码的codepen：@L_502_1@

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

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

是否有跨浏览器方式来为每行使用一个HTML元素？

解决方法 您正在使用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}

@H_404_49@ 总结

以上是内存溢出为你收集整理的html – 垂直元素列表,其中每行缩小其宽度以匹配内部内容全部内容，希望文章能够帮你解决html – 垂直元素列表,其中每行缩小其宽度以匹配内部内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。