Question

我的导航栏中间有图像。看起来类似于：

<nav class="navigation">
   <ul class="navigation-list-1">
      <li class="navigation-list-item"><a href="#home">Home</a></li>
      <li class="navigation-list-item"><a href="#features">Features</a></li>
      <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
      <li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
      <li class="navigation-list-item"><a href="#form">Form</a></li>
      <li class="navigation-list-item"><a href="#team">Team</a></li>
      <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>

风格：

> .navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}

.logo {
  position:absolute;

width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}

ul{
  display:flex;
  margin-left:-40px;

}
li{
  flex:1;
  background:yellow;
  border:1px solid green;
  height:70px;
  line-height:70px;
  text-align:center;
}

li>a{
  text-decoration:none;
}

现在，如果导航项中的文本长于特定长度，则文本将分成下一行并移到栏外，因此它看起来不太好。如何使容器中的文本始终在一行？

Answer 1

开始的好选择是为文本添加css样式：white-space: nowrap; 另一个好方法是以vw为单位设置font-size。字体将根据屏幕尺寸做出响应。

将文本放入flexbox容器中

1 个答案: