Question

我绝对将ul列表（但可以是任何元素）放置在容器的底部中心。调整窗口或容器的大小时，列表会缩小，就像在某处应用了页边距或填充或最大宽度一样。参见this fiddle。

所需效果 我需要该列表以保持自动宽度（取决于其内容），并且仅在其占用父级宽度的100％以上时才缩小。

我注意到这种行为仅在以下情况下发生：translateX（-50％）。

编辑包装div包含其他元素。列表充当导航菜单或工具箱。

HTML

var dr = await this.$auth
    .loginWith('local', {
      data: {
        username: this.username,
        password: this.password
      }
    })
    .then(response => {
      console.log(response)
    })
    .catch(e => {
      this.error = e + ''
    })

CSS

<div id="wrapper">

  <p>Whatever other content</p>

  <ul id="list">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </ul>
</div>

Answer 1

您可以使用flexbox替换旧的绝对定位方式。

#wrapper {
  background: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
#list {
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: flex-end;
  margin: 0 auto;
  border: 1px solid #222;
}

我更新了小提琴http://jsfiddle.net/uLj5raoq/

转换时的元素宽度：translate（）

1 个答案: