0

Здравствуйте, места отступов кликабельны, как пофиксить?

введите сюда описание изображения

CSS:

li.top {
  list-style-type: none;
  display: inline-block;
  margin-left: 6%;
  margin-top: 4%;
  color: #e6e6e6;
  font-size: 1.5em;
  font-family: 'Roboto', sans-serif;
  transition: 0.35s;
}

.bottomline {
    position: relative;
    color: #ff3296;
    cursor: pointer;
}

.bottomline:after {
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #249cce;
content: "";
transition: width 0.2s;
}
.bottomline:hover {
color: #fff;
}
.bottomline:hover:after {
width: 100%;
}

HTML:

        <ul>
        <div class="col-md-2 col-xs-12">
            <p class="onheader">TVARINSKY</p>
        </div>
        <div class="col-md-8 col-xs-9">
            <a href="#"><li class="top bottomline">Home</li></a>
            <a href="#"><li class="top bottomline">About me</li></a>
            <a href="#"><li class="top bottomline">Portfolio</li></a>
            <a href="#"><li class="top bottomline">Comments</li></a>
            <a href="#"><li class="top bottomline">Contact</li></a>
        </div>
        <div class="col-md-2 col-xs-10">
            <a href="#"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a>
            <a href="#"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a>
            <a href="#"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a>
        </div>
        </ul>
2
  • 2
    А что li делают внутри a?
    – Visman
    21 мая 2017 в 13:20
  • @Visman Немного тупанул, пофиксил
    – user234223
    21 мая 2017 в 13:29

2 ответа 2

1

Все дело в том, что у вас тег li внутри тега a, и от этого оно так себя ведет.

0

Исправил на:

CSS:

a.top {
  list-style-type: none;
  display: inline-block;
  margin-left: 6%;
  margin-top: 4%;
  color: #e6e6e6;
  font-size: 1.5em;
  font-family: 'Roboto', sans-serif;
  transition: 0.35s;
  text-decoration: none;
}

.bottomline {
    position: relative;
    color: #ff3296;
    cursor: pointer;
}

.bottomline:after {
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #249cce;
content: "";
transition: width 0.2s;
}
.bottomline:hover {
color: #fff;
}
.bottomline:hover:after {
width: 100%;
}

HTML:

    <div class="col-md-12 col-xs-11">
        <div class="col-md-2 col-xs-12">
            <p class="onheader">TVARINSKY</p>
        </div>
        <div class="col-md-8 col-xs-9">
            <a href="#" class="top bottomline">Home</a>
            <a href="#" class="top bottomline">About me</a>
            <a href="#" class="top bottomline">Portfolio</a>
            <a href="#" class="top bottomline">Comments</a>
            <a href="#" class="top bottomline">Contact</a>
        </div>
        <div class="col-md-2 col-xs-10">
            <a href="#"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a>
            <a href="#"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a>
            <a href="#"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a>
        </div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.