последний li делится на середину при использовании столбцов CSS - PullRequest
Новая
       56

последний li делится на середину при использовании столбцов CSS

0 голосов
/ 11 октября 2018

Итак, я использую столбцы CSS в полностраничной навигации, которую я строю.Это потому, что навигация может быть добавлена ​​динамически, поэтому необходимо предусмотреть место для большего количества навигационных элементов.

Однако, если заголовки некоторых навигационных элементов достаточно длинные, чтобы попасть в две строки, последний li выглядит так:разрезать пополам.Похоже, что он находится на полпути через портал.

Снимок экрана ниже:

https://i.stack.imgur.com/TvxtA.jpg

Кажется, я исчерпал все возможные стили столбцов, и до сих пор ничего не получалось.

Код указан ниже:

html: 

<div class="category-headers">
    <ul id="category_header_content">
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Long Title Page</a></li>
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Page</a></li>
        ...
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Long Title Page</a></li>
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Page</a></li>
    </ul>
</div>

scss: 

.category-headers{
  position: absolute;
  height: calc(100vh - 185px);
  padding: 0 50px;
  top: 110px;
  width: 40%;
  left: 60%;
  column-count: 2;
  column-fill: auto;
  padding-top: 30px;
  ul{
    margin: 0 0 30px 0;
    height: 100%;
    padding: 0;
    display: inline-block;
    li{
      list-style: none;
      margin-bottom: 10px;
      padding-right: 20px;
      a{
         color: $text-light-blue;
         font-size: 20px;
      }
    }
  }  
}
...