Question

我正在尝试制作一个标题标题，它是一个标题列表，有时标题太长而且介于两者之间。因此，为了节省空间，我将br添加到breakline。

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

 <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

对齐标题页中的长文本

1 个答案: