css - 对齐选项卡标题中的长文本

Question

我正在尝试做一个选项卡标题，它是一个标题列表，有时标题太长并且中间有“-”。所以为了节省空间，我将 br 添加到 breakline。

1/问题是“-”符号之间的上下距离太大，有什么办法可以解决吗？这是通过设置 br 标签来实现的正确方法，还是应该为断裂线的每个 li 设置最大宽度？

This is my codepen

 <div>
   <ul>
    <li>Real Estate, <br> Building House</li>
    <li>Distribution <br>–<br> Manufacturing</li>
    <li>Media <br>–<br> Broadway theater</li>
    <li>Singer <br>–<br> dancer</li>
    <li>Real Estate</li>
    <li>Construction</li>
 </ul>

  div {width: 80%; margin: 0 auto;}
  ul {
     list-style: none;
     /* display: table; */
     width: 100%;
     padding: 0;
     margin: 0;
  }
  ul li {
     position: relative;
     font-size: 1.4rem;
     /* display: table-cell; */
     color: blue;
     text-align: center;
     display: inline-block;
     margin-right: 20px;
  }

Answer 1

希望对你有帮助:

ul li {
    font-size: 1.4rem;
    color: red;
    max-width: 120px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    /* padding: 0 5px; */
    display: inline-block;
    margin-right: 14px;
}

Updated codepen