1

Тема: Як розставити посилання на сторінці?

Вітаю. Вже кілька днів намагаюсь підняти правий блок посилань на один рівень з лівим.
В когось є ідеї?

<html>
    <head>
        <meta charset="UTF-8" />
        <script src="scripts/include.min.js"></script>
    </head>
    <body>
        <div style="margin-left: 3%; text-align: left; display: grid;">
            <a href="index.htm"> Головна </a>
            <a href="agreements.htm"> Перелік угод </a>
        </div>
        <div style="margin-right: 3%; text-align: right; display: grid;">
            <a href="login.htm"> Логін </a>
            <a href="#" onclick="window.print();"> Роздрукувати </a>
        </div>
    </body>
</html>

Дякую.

2 Востаннє редагувалося koala (21.05.2025 11:43:56)

Re: Як розставити посилання на сторінці?

1. Вирівняйте код і створіть класи для елементів, очі випадають з таким працювати.
2. Атрибут style зазвичай стосується вмісту блоку, а не його положення. Тобто вам треба або зробити style для body, або (значно краще) додати div навколо цих двох - і, наприклад, зробити йому

style="display: grid; grid-template-columns: 50vw 50vw;"

(якщо ви любите grid, але можна і іншими).

Що каже інформаційна м'ясорубка

Вітаю! Проблема у вашому HTML-коді полягає в тому, що два блоки <div> (лівий і правий) існують один під одним, бо ви не задали їм спільного контейнера з горизонтальним розміщенням.

Щоб розмістити правий блок на одному рівні з лівим, потрібно:

Помістити обидва <div> у спільний контейнер.

Задати цьому контейнеру горизонтальне розміщення дочірніх елементів, наприклад через display: flex.

Ось виправлений код:

html
Копіювати
Редагувати
<html>
<head>
  <meta charset="UTF-8">
  <script src="scripts/include.min.js"></script>
</head>
<body>
  <div style="display: flex; justify-content: space-between; margin: 0 3%;">
    <div style="text-align: left; display: grid;">
      <a href="index.htm">Головна</a>
      <a href="agreements.htm">Перелік угод</a>
    </div>
    <div style="text-align: right; display: grid;">
      <a href="login.htm">Логін</a>
      <a href="#" onclick="window.print();">Роздрукувати</a>
    </div>
  </div>
</body>
</html>
Що змінилось:
Додано спільний контейнер з display: flex.

justify-content: space-between розводить лівий і правий блоки по краях.

margin: 0 3% — додано відступи зліва і справа.

Якщо потрібне вертикальне вирівнювання (наприклад, щоб посилання були по верхній лінії), можна ще додати align-items: start до контейнера.

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

Подякували: andriyshel, leofun012

3

Re: Як розставити посилання на сторінці?

Дякую.
Можна поцікавитись що за нейронка? Бо мені Gemini майже повністю код переписав. Я не наважився використати через купу невідомих тегів. А тут зміни мінімальні та ще і опис є.

4

Re: Як розставити посилання на сторінці?

ChatGPT 4o.