Как расположить два якоря рядом - PullRequest
Новая
       1

Как расположить два якоря рядом

0 голосов
/ 30 июня 2019

Я делаю навигационную панель и на ней есть все якоря. У меня есть некоторые слева, а некоторые справа. Два элемента div расположены рядом на панели навигации, но второй якорь в каждом элементе div находится под первым якорем.

Я искал в Интернете и перепробовал все, что смог найти, но ни одно из найденных решений не сработало. 

body {
	background-color: #ec1320;
	color: #ec1320;
}

.nav-bar {
	background-color: #1524ea;
	color: white;
	height: 100px;
	position: absolute;
	width: 100%;
	height: 8%;
	left: 0px;
	top: 0px;
}

.nav-link {
	color: #d0d0d0;
	font-size: 20px;
	position: relative;
	margin-top: 5px;
}

.nav-link:hover {
	color: gray;
}

.nav-head {
	color: white;
	font-size: 30px;
	margin-top: -4px;
}

.nav-head:hover {
	color: gray;
}

.left-nav {
	position: absolute;
	left: 0px;
}

.right-nav {
	position: absolute;
	right: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
  <header>
    <nav class="nav-bar">
      <div class='container'>
        <div class="left-nav">
          <a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a>
          <a href='index.html' class='nav-item nav-link'>Home</a>
        </div>
        <div class="right-nav">
          <a href='login.html' class='nav-item nav-link'>Login</a>
          <a href='register.html' class='nav-item nav-link'>Register</a>
        </div>
      </div>
    </nav>
  </header>
</body>

Мне нужно, чтобы каждый якорь располагался рядом с любыми другими якорями в его родительском элементе.

Ответы [ 2 ]

0 голосов
/ 30 июня 2019

Поместите содержимое .right-nav и left-nav во флексбокс.

Попробуйте: 

.right-nav, .left-nav {
  display: flex;
}

И вам будет хорошо!

Надеюсьэто помогает!Приветствия

0 голосов
/ 30 июня 2019

Поскольку вы используете Bootstrap, вы можете просто поместить все свои ссылки в один навигационный контейнер. На последней выровненной по левому краю ссылке установите для правого поля значение auto (mr-auto). Это сместит оставшиеся ссылки вправо. Я поиграл с некоторыми стилями, чтобы он выглядел лучше, в том числе с переключения класса Bootstrap с контейнера на контейнер-жидкость: 

body {
  background-color: #ec1320;
  color: #ec1320;
}

.nav-bar {
  background-color: #1524ea;
  color: white;
}

.nav-link {
  color: #d0d0d0;
  font-size: 20px;
  position: relative;
}

.nav-link:hover {
  color: gray;
}

.nav-head {
  color: white;
}

.nav-head:hover {
  color: gray;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body>
  <header>
    <nav class="nav-bar">
      <div class='container-fluid'>
        <nav class="nav">
          <a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a>
          <a href='index.html' class='nav-item nav-link mr-auto'>Home</a>
          <a href='login.html' class='nav-item nav-link'>Login</a>
          <a href='register.html' class='nav-item nav-link'>Register</a>
        </nav>
      </div>
    </nav>
  </header>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...