Как поставить две ссылки рядом друг с другом по горизонтали?

Question

Как поставить две ссылки рядом друг с другом по горизонтали? Подскажите пожалуйста! Заранее спасибо)

Answer 1

Тэг <a> и так является строчным элементом и прекрасно ставит соседей рядом с собой. Приведите пример где у вас это работает не так.

<a href="">link 1</a>
<a href="">link 2</a>

Answer 2

Если коротко:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.list li {
  display: inline-block;
}

.flex {
  display: flex;
}

.float li {
  float: left;
}

<!-- По-умолачнию ссылки с display:inline, поэтому ссылки будут располагаться  -->
<div>
  <a href="#">link 1</a>
  <a href="#">link 2</a>
</div>

<!-- Обертка для ссылок или сама ссылка со свойством display:inline, будут вести как строчные снаружи (блочные внутри) -->
<ul class="list">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
</ul>

<!-- Задать обертке display: flex  -->
<ul class="flex">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
</ul>

<!-- Обертка для ссылок или сама ссылка со свойством display: float (обтекание) -->
<ul class="float">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
</ul>


<!-- Разместить ссылки в таблице или для обертки для ссылок задать display: table, а ссылкам display: table-cell -->
<table>
  <tr>
    <td><a href="#">link 1</a></td>
    <td><a href="#">link 2</a></td>
  </tr>
</table>

<!--   .... -->

БЛОГ НА HUSL

Как поставить две ссылки рядом друг с другом по горизонтали?

Ответы (2 шт):