Элемент Div находится на новой строке без <br>, но я не хочу этого делать - PullRequest
Новая
       18

Элемент Div находится на новой строке без <br>, но я не хочу этого делать

0 голосов
/ 31 марта 2019

Я создаю веб-страницу, и у меня есть заголовок с опцией меню слева, заголовок посередине и ссылка на страницу входа / регистрации.Это img: https://ibb.co/z6R1h6w К сожалению, ссылка для входа и регистрации на левой стороне находится на новой строке, и я не хочу, чтобы это произошло.Я пробовал следующее: 

  float: right;

  text-align: right;

  vertical-align: text-top !important;

Код: https://hastebin.com/pesuhemulo.xml

ура заранее

Ответы [ 2 ]

0 голосов
/ 31 марта 2019

Вы не должны больше использовать макеты с плавающей точкой, они в большинстве случаев устарели.

Я рекомендую использовать Flexbox . Вот небольшой пример: 

header, header #menu {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
}

#menu li {
  margin: 0 20px;
}
<header>
<p>Menu</p>
<p>Image</p>
<ul id="menu">
<li>link A</li>
<li>link B</li>
</ul>
</header>

Вы можете добавить nowrap к flex-flow, чтобы убедиться, что они ВСЕГДА в одной строке.

Надеюсь, это поможет.

0 голосов
/ 31 марта 2019

Вы можете использовать сетку CSS. В приведенном ниже примере фрагмента вы можете видеть, как центральный столбец растягивается по неиспользуемой ширине, и все 3 элемента делятся на 1 строку: 

header {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}

header .header-title {
  text-align: center;
  background: #f0f0f0;
}

header .left {
  text-align: left;
}

header .right {
  text-align: right;
}
<header>
  <div class="left">Nav</div>
  <div class="header-title">Header</div>
  <div class="right">Login</div>
</header>

Измените grid-template-columns, чтобы изменить ширину столбцов.

...