我正在使用导航栏的弹性框,它工作正常但是当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)