CSS span по ссылке

Question

Извините, если это действительно глупый вопрос, но я разработчик, и мои дизайнерские навыки минимальны в минуту, я работаю на личном сайте, и я застрял в незначительной проблеме ,

У меня есть верхний nav с ul и li. Эти элементы содержат ссылку <a href... и в этих тегах у меня есть <span>.

Пробел отображается только тогда, когда ссылка наводится.

CSS

div#topnav a span {display: none;} 
div#topnav a:visited span {display:none;} 
div#topnav a:hover span {display: block;} 

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

Есть ли что-то, что я могу сделать, чтобы сообщить тегу, чтобы игнорировать ширину пролетов и не меняться при отображении диапазона, но не влияют на ширину, автоматически устанавливаемую текстом ссылок (не span)?

HTML

<div id="topnav"> 
    <ul> 
     <li><a href="http://www.google.co.uk">Example<span>this is a link to google</span></a></li> 
     <li><a href="http://www.bbc.co.uk">Another EG<span>this is another link that goes to bbc!</span></a></li> 
    </ul> 
</div> 

Стоит отметить, этот текст в пролете появляется ниже нав, поэтому мне все это будет отображаться.

Answer 1

ну, если вы хотите, вы можете просто удалить пролет из потока, и они перестанут влиять на ссылки каким-либо образом, просто предоставив абсолютное положение пролету и относительное положение к а. Вы также не нуждаетесь в: посещении, я думаю, поскольку я предполагаю, что это предотвратит показ ссылки, если она уже была посещена. Примерно:

div#topnav a {position:relative;} 
div#topnav a span {display: none;} 
div#topnav a:visited span {color:purple;} 
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;} 

Вы можете изменить нижнее значение в соответствии с вашими потребностями или добавить свойства слева и справа, чтобы разместить их дальше. Вы также можете добавить ширину к диапазону. position: относительный на a необходим, чтобы span знал, куда идти 50 px вниз.

Редактировать: добавлен посещенный класс, так как он может помочь в достижении степени, просто изменив цвет текста.

Answer 2

Просто установите ширину на span/link, чтобы она автоматически не определяла ее по длине содержимого.

div#topnav a span { width: 50px; } 

Примечание: 50px пример, вы можете установить его на то, что вы хотите.

Answer 3

Попробуйте использовать тег div вне тега «a» с фиксированной шириной, чтобы ваш контент не проходил указанную ширину.