小编Con*_*orL的帖子

Flex盒子项目,收缩以适合文本包装

我正在使用导航栏的弹性框,它工作正常但是当li项目内的文本落到一个新行时,如果li元素的实际宽度会缩小,我会喜欢它.例如这样:

正常宽度: 正常宽度

压缩: 压缩

在此输入图像描述

"舞蹈与表演"文本左侧和右侧的浪费空间意味着项目重叠并且看起来很糟糕.

如何获得li自动宽度?

header {
  height: auto;
  margin: auto;
  background-color: #58595B;
  z-index: 100;
  max-width: 1200px;
  width: 95%;
}
ul.header_items {
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
}
.header_items li {
  background-color: #7E489C;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  padding: 2px;
  width: auto;
}
.header_items li a {
  font-family: 'Norwester-Regular', sans-serif;
  color: #ffffff;
  font-size: 15pt;
  text-align: center;
  vertical-align: …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

6
推荐指数
1
解决办法
870
查看次数

标签 统计

css ×1

flexbox ×1

html ×1