Неправильное выравнивание HTML при наведении - PullRequest
Новая
       9

Неправильное выравнивание HTML при наведении

0 голосов
/ 17 февраля 2012

У меня есть меню на веб-странице, и я хочу добавить акцент на элемент, над которым моя мышь наведена. Прежде чем навести курсор мыши, меню выглядит хорошо, а выравнивание выглядит хорошо. Чтобы добавить emphsis, я добавил маленькую стрелку (или знак «>»). Проблема в том, что теперь текст переходит вправо на 2 символа.

Я хочу добавить символ «>», чтобы текст моего меню не прыгал вправо. Правильное поведение заключается в том, что текст остается в р кружева, и стрелка появляется в 2 местах слева от элемента меню.

Обратите внимание, я пытался изменить свое выравнивание, и все это выглядит как дерьмо. Только text-align: left дает правильное выравнивание. 

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400
  font-size:0.5em;
}

#leftMenu a:hover:before {
  content: "> ";
}

Как добавить стрелку без текста, прыгающего вправо?

Ответы [ 2 ]

1 голос
/ 17 февраля 2012

Просто ">" уже существует, просто не видно. Таким образом, он будет занимать недвижимость в меню, поэтому ничего не будет двигаться, когда появится. Вот небольшой пример:

CSS: 

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400;
  font-size:0.5em;
}

.marker{
  visibility:hidden;
}

#leftMenu li:hover .marker{
  visibility:visible;
}

#leftMenu ul{
  list-style:none;
}

HTML: 

<div id="leftMenu">
  <ul>
     <li><span class="marker">&gt;</span><a href="#">Link 1</a></li>
     <li><span class="marker">&gt;</span><a href="#">Link 2</a></li>
     <li><span class="marker">&gt;</span><a href="#">Link 3</a></li>
  </ul>
</div>

Я не совсем уверен в точном расположении вашего меню, но я думаю, что вышеизложенное отражается в общей идее.

0 голосов
/ 17 февраля 2012

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

Однако это может быть довольно запутанным, поскольку стрелка может иметь разную ширину в каждом браузере (даже с одинаковым шрифтом и размером шрифта).

Другая возможность - использовать свойства позиционирования для перемещения стрелки в нужное место. Например, если вы используете position: absolute;, он больше не будет перемещать другие объекты. Имейте в виду, что тогда он будет расположен абсолютно внутри следующего родителя, который не имеет стандартной позиции (статическая).

...