4

введите сюда описание изображения

как сделать ссылки по горизонтали собственно когда добавляю флекс получается вот введите сюда описание изображения

.top-nav_menu {
  display: flex;
}
.top-nav_menu a {
  text-decoration: none;
  padding: 0;
}
.top-nav_menu li {
  list-style: none;
}
<div class="top-nav_menu">
  <div class="row justify-content-around">
    <div class="col-md">
      <ul>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </div>
    <!-- /.col-md -->
    <div class="col-md">
      <img src="img/[email protected]" alt="logo">
    </div>
    <!-- /.col-md -->
    <div class="col-md">
      <ul>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contacts</a></li>

        <li>
          <button class="btn-app">Get App</button>
        </li>
      </ul>

Не могу разобраться.

1
  • добавил html код 27 фев 2018 в 18:43

1 ответ 1

3

Нужно добавить display: flex; спискам (ul):

* {
  margin: 0;
  padding: 0;
}

.top-nav_menu>.row {
  display: flex;
  justify-content: space-between;
  background-color: crimson;
}

ul {
  display: flex;
}

.top-nav_menu a {
  text-decoration: none;
  padding: 0;
}

.top-nav_menu li {
  list-style: none;
}
<div class="top-nav_menu">
  <div class="row justify-content-around">
    <div class="col-md">
      <ul>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </div>
    <!-- /.col-md -->
    <div class="col-md">
      <img src="https://via.placeholder.com/100x100" alt="logo">
    </div>
    <!-- /.col-md -->
    <div class="col-md">
      <ul>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contacts</a></li>
        <li>
          <button class="btn-app">Get App</button>
        </li>
      </ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.