Как убрать линия между словами в списке?

Question

index.php `

<header class="row sticky-top">
 <div class="col-xl-6 nav_header my-auto">
     <nav>
        <ul>
          <li><a class="item__text" href="#">About</a></li>
          <li><a class="item__text" href="#">Cabinet</a></li>
          <li><a class="item__text" href="#">Packages</a></li>
          <li><a class="item__text" href="#">Balance</a></li>
        </ul>
     </nav>
   </div>
        </header>`

index.css

`

    header{
        height:70px;
    }
    .nav_header{
        padding:0;
    }
    .nav_header ul li{
        display:inline-block;
        margin:0 20px;
    }
    .nav_header ul li .item__text{
        font-family:Roboto,sans-serif;
        font-weight:600;
        font-size:15px;
        color:whitesmoke;
    }
      .nav_header ul li .item__text:hover{
        color:#00cdff;
        cursor:pointer;
        transition:0.4s ease-in-out;
        transform:translateY(-2px);
    }
      .nav_header ul li .item__text:not(:hover){
        color:whitesmoke;
        cursor:pointer;
        transition:0.5s ease-in-out;
        transform:translateY(0);
    }
    .nav_header ul li .item__text::after{
        content:'';
        width: 0;
        height:2px;
        background-color:#00cdff;
        transition:0.5s;
        margin-top:2px;
    }
    .nav_header ul li .item__text:hover::after{
        width:100%;
        transition:0.5s;
    }
    .nav_header ul li .item__text:active{
        transform:scale(0.97);
    }

    `

Почему при выделение слов в списке, выделяется какая-то вертикальная линия между словами? Как это убрать?

Answer 1

Это виртуальный разделитель, вы его не уберете. По-сути он наследует поведение мышки от родителя - контейнера с пунктами меню. Чтобы избавиться от эффекта на скрине, запретите выделение мышкой и все

Answer 2

Так-так кто-то похоже поместил нумерованный список в маркированный

<ul>
          <li><a class="item__text" href="#">About</a></li>
          <li><a class="item__text" href="#">Cabinet</a></li>
          <li><a class="item__text" href="#">Packages</a></li>
          <li><a class="item__text" href="#">Balance</a></li>
        </ul>

Answer 3

Есть еще один вариант, но без использования тегов списка.

<ul>
          <li><a class="item__text" href="#">About</a></li>
          <li><a class="item__text" href="#">Cabinet</a></li>
          <li><a class="item__text" href="#">Packages</a></li>
          <li><a class="item__text" href="#">Balance</a></li>
        </ul>

можно назначить этот (список) с помощью Flexbox:

nav {
  display: flex;
  justify-content: space-around;
}

Answer 4

Это отступ примерно в 4px - проблема inline-block элементов.

Чтобы их убрать нужно убрать фактические отступы между элементами чтобы удалить пробел, или измените размер шрифта родителя на 0, а затем при необходимости сбросьте размер шрифта в дочерних элементах.

header {
  height: 70px;
}

.nav_header {
  padding: 0;
}

.nav_header ul li {
  display: inline-block;
  margin: 0 20px;
}

.nav_header ul li .item__text {
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: whitesmoke;
}

.nav_header ul li .item__text:hover {
  color: #00cdff;
  cursor: pointer;
  transition: 0.4s ease-in-out;
  transform: translateY(-2px);
}

.nav_header ul li .item__text:not(:hover) {
  color: whitesmoke;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  transform: translateY(0);
}

.nav_header ul li .item__text::after {
  content: '';
  width: 0;
  height: 2px;
  background-color: #00cdff;
  transition: 0.5s;
  margin-top: 2px;
}

.nav_header ul li .item__text:hover::after {
  width: 100%;
  transition: 0.5s;
}

.nav_header ul li .item__text:active {
  transform: scale(0.97);
}

<header class="row sticky-top">
  <div class="col-xl-6 nav_header my-auto">
    <nav>
      <ul>
        <li><a class="item__text" href="#">About</a></li><li><a class="item__text" href="#">Cabinet</a></li><li><a class="item__text" href="#">Packages</a></li><li><a class="item__text" href="#">Balance</a></li>
      </ul>
    </nav>
  </div>
</header>

`

Еще один вариант решения данной проблемы - это задать родительскому элементу display: flex , тогда внутренние элементы будут обладать свойствами блочного элемента.

header {
  height: 70px;
}

.nav_header {
  padding: 0;
  
  display: flex;
}

.nav_header ul li {
  display: inline-block;
  margin: 0 20px;
}

.nav_header ul li .item__text {
  font-family: Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: whitesmoke;
}

.nav_header ul li .item__text:hover {
  color: #00cdff;
  cursor: pointer;
  transition: 0.4s ease-in-out;
  transform: translateY(-2px);
}

.nav_header ul li .item__text:not(:hover) {
  color: whitesmoke;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  transform: translateY(0);
}

.nav_header ul li .item__text::after {
  content: '';
  width: 0;
  height: 2px;
  background-color: #00cdff;
  transition: 0.5s;
  margin-top: 2px;
}

.nav_header ul li .item__text:hover::after {
  width: 100%;
  transition: 0.5s;
}

.nav_header ul li .item__text:active {
  transform: scale(0.97);
}

<header class="row sticky-top">
  <div class="col-xl-6 nav_header my-auto">
    <nav>
      <ul>
        <li><a class="item__text" href="#">About</a></li><li><a class="item__text" href="#">Cabinet</a></li><li><a class="item__text" href="#">Packages</a></li><li><a class="item__text" href="#">Balance</a></li>
      </ul>
    </nav>
  </div>
</header>

`

БЛОГ НА HUSL

Как убрать линия между словами в списке?

Ответы (4 шт):