<a href> Breaks Text Formatting

So I've searched far and wide but cannot find a solution to this strange, strange problem. I've got some totally standard HTML and CSS but it just doesn't work for some reason when I put it in context. Observe:<a href> Breaks Text Formatting

h1, h2, h3, h4, p { 
 
\t position: relative; 
 
\t margin-top: 2vw; 
 

 
\t font-family: "Roboto Condensed Light", sans-serif; 
 
\t color: white; 
 
\t text-align: center; 
 
} 
 

 
.nav { 
 
\t position: fixed; 
 
\t top: 72px; 
 
\t margin: 0px; 
 
\t width: 384px; 
 
\t 
 
\t font-size: 14px; 
 
\t text-align:center; 
 
\t letter-spacing: 7px; 
 
\t 
 
\t opacity: .75; 
 
\t 
 
\t text-shadow: 0px 0px 12px black; 
 
\t 
 
\t z-index: 10; 
 
\t 
 
\t /*cursor: pointer;*/ 
 
} 
 

 
a { 
 
\t color: inherit; 
 
\t text-decoration: none; 
 
} 
 

 
body {background:black}

<p class="nav"> 
 
\t \t \t 
 
\t \t \t <a href="#">MUSIC</a> VIDEO PHOTO ABOUT 
 
\t \t \t 
 
\t \t </p>

This is all the code relevant to the point at hand. I've got an incredibly simple navigator in the works that's just links in a p (it looks right in context). If you run the snippet, you see this works just as it should. However, when in the page:

enter image description here

any text surrounded by an <a> snaps to the position of the first untagged word and gets all overlap-y.

I've uploaded a super-alpha version of the site-in-progress для ссылки на окружающий код и увидеть странность в действии.

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

Любые идеи?

источник

2015-03-05 Metal96

Проблема в другом месте, код, который вы пост здесь работает (нажмите на кнопку "Выполнить фрагмент кода"). Кажется, что ссылка плавает или позиционируется, но ничего из этого в вашем коде выше. – panther

Можете ли вы предоставить ссылку на страницу, где это происходит? – David

Просьба предоставить код, где это происходит. –

Правило на линии 7 помещает абсолютное положение в ссылку, а не текстовое содержимое. Это вопрос.

* {position: absolute;} 
/* maybe you thought body > * {...} - position absolutely all 'top' elements */

Первый вариант заключается в определении элементов (.header, .nav {position: absolute;}), который должен быть установлен.

Второе исправление - это переписать абсолютное положение ссылок (или ссылок на навигацию). Просто добавьте

a {position: static}

ИЛИ

.nav a {position: static}

источник

2015-03-05 08:00:10 panther

Это позволит устранить вашу проблему :)

.nav a{ 
    position:initial; 
}

Просто поместите это после того, как .nav{} и будет работать нормально.

CSS

h1, h2, h3, h4, p { 
    position: relative; 
    margin-top: 2vw; 

    font-family: "Roboto Condensed Light", sans-serif; 
    color: white; 
    text-align: center; 
} 

.nav { 
    position: fixed; 
    top: 72px; 
    margin: 0px; 
    width: 384px; 

    font-size: 14px; 
    text-align:center; 
    letter-spacing: 7px; 

    opacity: .75; 

    text-shadow: 0px 0px 12px black; 

    z-index: 10; 

    /*cursor: pointer;*/ 
} 
.nav a{ 
     position:initial; 
    } 
a { 
    color: inherit; 
    text-decoration: none; 
} 

body {background:black}

HTML

<p class="nav"> 
    <a href="#">MUSIC</a> VIDEO PHOTO ABOUT 
</p>

источник

2015-03-05 08:04:04

<a href> Breaks Text Formatting

ответ

Смежные вопросы