Как сделать, чтобы меню стало нормальным?

Question

[kentos]

Здравствуйте, как сделать нормальное меню? Надо чтобы телефоны были ровно в шапке, а не как на скрине



один за одним надо чтобы было

<div class="contact-icon">
									<i class="icon-phone" aria-hidden="true"></i>
							</div>
							<style>
							.contact-icon {
								display:inline-block;
								float:left;
							}

							.contacts-data {
								display:block;
								position:relative;
								line-height: 18px !important;
    						font-size: 15px !important;
    						margin-top: -4%;
							}
							</style>
							<div class="contacts-data">
								<ul>
							<li><a href="tel:[phone]">[phone]</a></li>
						<li>	<a href="tel:[phone]">[phone]</a></li>
							<li><a href="tel:[phone]">[phone]</a></li>
						</ul>

Comments

[dsmaslov]

kentos, ваш код отображается как вы хотите: https://codepen.io/oxythres/pen/pZabZV

Дайте его полностью или ссылку.

[kentos]

Вот так он отображается

Answer 1

[Andrej Sharapov]

Можно добавить флекса и будет ок https://jsfiddle.net/bfmryqov/1/

Comments

[kentos]

К сожалению, получается вот так(( тык

[Andrej Sharapov]

kentos, так вы уберите круг и добавьте стили какие вам нужно для отладки.

[kentos]

Andrej Sharapov, Я понимаю, а как можно сделать, чтобы не такое большое расстояние было между ними, через line-height?

[Andrej Sharapov]

kentos, у вас там несколько факторов влияют на высоту и отступы, откройте консоль и поковыряйтесь.

[Andrej Sharapov]

kentos, в футере у вас все нормально отображается, если убрать круг. Значит дело в шапке, там и правьте.

[kentos]

Andrej Sharapov, В футере, сам делал, а вот в шапке, хз, что там такое может быть