Как не сдвигать весь текст в CSS?

Question

[flexpc]

<p><a text-decoration: none; href="">Главная</a></p>
         <p><a text-decoration: none; href="">Католог</a></p>
         <p><a text-decoration: none; href="">Подержка</a></p>
         <p><a text-decoration: none; href="">О нас</a></p>

a
{
    color: black;
    position: relative;
    left: 800px;
}

Результат:


Я только новичок в верстке. И хотел бы спросить, как в коде CSS, мне двигать не все гиперссылки, а только главная или же какой то другой, а так же как его поднять вверх, на черный квадрат?

Comments

[Кирилл Никитин]

Это не квадрат, а прямоугольник, ну или линия. Надо не поднимать, а класть внутрь этого блока и там стилизовать. Тег <p> это параграф и он не для этого, а ещё он блочный. Обычно такое делают списком. Но если всё же так — то, очевидно, дать разные классы каждому пункту. Ну или использовать псевдоклассы. Нельзя писать стили в теги без атрибута style="", да и лучше сразу в css, раз уж он всё равно вон есть. Каталог. Поддержка.

Answer 1

[GGHotDog]

1) Зачем ты тег a заворачиваешь ещё в тег p?
2)

text-decoration: none

ты так же мог написать в файле css, не суй ненужный код
3) Если ты хочешь чтобы ссылки были в чёрном блоке тебе нужно их прописать в этом самом блоке блоке т.е:

<div class="topnav">
		 <a href="">Главная</a>
         <a href="">Каталог</a>
         <a href="">Подержка</a>
         <a href="">О нас</a>
	</div>

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a
{
    color: black;
	float: left;
	padding: 14px 16px;
	color: #f2f2f2;
	text-decoration: none;
}

И что у меня получилось:

Comments

[Ankhena]

float: left;

Что вы несете? Посмотрите на календарь.

В современном мире флоаты используются только для того, для чего их придумали.
А для сеток и микросеток используют флексы и гриды.