要让 li 元素的宽度随内容自动增长，可以使用 display: inline-block; 属性。这个属性可以让元素像行内元素一样排列，但同时又可以设置宽度和高度。

具体来说，将 li 元素的 display 属性设置为 inline-block，再设置 padding 和 margin 等样式即可实现随内容自增的效果。例如：

li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #ccc;
}

上述代码会将 li 元素设置为 inline-block，并且设置了一些样式。其中 padding 控制元素内部的间距，margin-right 控制元素右侧的外边距，background-color 则用于设置背景色。

通过上述样式设置，li 元素的宽度就可以根据内容自动增长了。如果需要控制最小或最大宽度，可以使用 min-width 或 max-width 来限制。