Как разместить разные элементы на одной высоте

Question

Есть 3 кнопки с позицией relative размещенные в ul li Пример:

<ul>
  <li><button></button></li>
  <li><button></button></li>
  <li><button></button></li>
</ul>

Хочу разместить их с равной высотой однако один выходит ниже другого
Пытался top убавлять но выглядит это не очень

Добавлял width / height без результата

Answer 1

Используйте display: inline

ul {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 5px;
 
}

li {
  display: inline;
}

<ul>
  <li><button>Кнопка 1</button></li>
  <li><button>Кнопка 2</button></li>
  <li><button>Кнопка 3</button></li>
</ul>