Как выровнять форму с помощью flex - PullRequest
Новая
       1

Как выровнять форму с помощью flex

0 голосов
/ 24 апреля 2019

Я пытаюсь сделать клон Facebook на странице входа.Я застрял на море.Я хочу ввести, метка для выравнивания по гибкому концу, но я не уверен, как.

Я пытался использовать justify-content в div.Но это доцент-работа.Я попробовал justify-content на панели навигации, но я хочу, чтобы только форма и кнопка были выровнены по правому краю, а не h1 fakebook. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f4f4f4;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#main-header #nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  background: #4f43b9;
  padding: 1rem;
}

.logo {
  color: #fff;
  font-size: 2rem;
  padding: 0 1rem;
}

.btn {
  padding: 0.3rem;
  margin: 1rem;
  color: #fff;
  background: #6b5eda;
  border: 1px solid #1f166e;
}

.btn:hover {
  background: #291d8f;
}


CSS3
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f4f4f4;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#main-header #nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  background: #4f43b9;
  padding: 1rem;
}

.logo {
  color: #fff;
  font-size: 2rem;
  padding: 0 1rem;
}

.btn {
  padding: 0.3rem;
  margin: 1rem;
  color: #fff;
  background: #6b5eda;
  border: 1px solid #1f166e;
}

.btn:hover {
  background: #291d8f;
}

1 Ответ

1 голос
/ 24 апреля 2019

Вы можете попробовать с margin-left: auto;, но без HTML трудно сказать.

Вот скрипка, с которой я предположил, что разметка основана на классах в CSS: https://jsfiddle.net/b7f3xdao/

Опять же, трудно сказать, что является причиной неправильного отображения, если HTML отсутствует.

Вот фрагмент: 

body {
  background: #f4f4f4;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#main-header #nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  background: #4f43b9;
  padding: 1rem;
}

.logo {
  color: #fff;
  font-size: 2rem;
  padding: 0 1rem;
}

.btn {
  padding: 0.3rem;
  margin: 1rem;
  color: #fff;
  background: #6b5eda;
  border: 1px solid #1f166e;
  margin-left: auto;
}

.btn:hover {
  background: #291d8f;
}
<body>
  <div id="main-header">
    <div id="nav-bar">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="">
      </div>
      <div class="btn">
        Button
      </div>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...