Java 标签translate_变换时的元素宽度：translate（）

我绝对定位容器底部中心的ul列表(但可以是任何元素) . 当窗口或容器调整大小时，列表会缩小，就好像它是某种边距或填充或最大宽度应用于某处 . 见this fiddle .

Desired effect 我需要列表来保持自动宽度(取决于其内容)，并且只有当它超过父级宽度的100％时才会收缩 .

我注意到这种行为只发生在transform：translateX(-50％) .

EDIT 包装器div包含其他元素 . 列表充当导航菜单或工具箱 .

HTML

Whatever other content

CSS

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}

#wrapper {

position: relative;

height: 100%;

width: 100%;

background: #fff;

}

#list {

list-style: none;

position: absolute;

padding: 2px;

bottom: 0;

left: 50%;

transform: translateX(-50%);

font-size: 0;

background: #555;

}

#list li {

display: inline-block;

margin: 1px;

}

#list span {

display: block;

height: 40px;

width: 40px;

background: #222;

}