1

Ребят, такая проблема. Хочу чтобы лого был на одной строке с меню, я это сделал. Но меню очень низко сидит на странице (т.к. на одном уровне с эмблемой). Как сделать так, чтобы лого осталось на этой же позиции, а блок меню поднялся чуть выше?

.header {
  color: #22D99F;
  background-color: #052230;
  border: 3px solid #6593E1;
  border-radius: 30px;
  font-size: 40px;
  margin-top: 50px;
  margin-left: 200px;
  margin-right: 10px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
  width: 1100px;
}

.news {
  margin-right: 30px;
  display: inline-block;
  font-size: 30px;
  background-color: #6593E1;
  border: 5px solid #382C49;
  border-radius: 30px;
  color: #D2C2E1;
  padding-left: 10px;
  padding-right: 10px;
  width: 200px;
  text-align: center;
}

.news:hover {
  background-color: #78527E;
  color: lime;
}

.hood {
  display: inline-block;
}

.lab {
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 250px;
  background-image: url('http://russia-assault.ru/files/forums_imgs/1506001407.png');
  background-position: center;
}
<div class="lab hood"></div>
<div class="header hood">
  <div class="news">
    <B>Новости</B>
  </div>
  <div class="news">
    <B>Статистика</B>
  </div>
  <div class="news">
    <B>Турниры</B>
  </div>
  <div class="news">
    <B>Матчи</B>
  </div>
</div>

Если не совсем поняли суть вопроса - пишите. Спасибо.

2
  • Добавьте, пожалуйста, полный код, не вижу в примере класса .lab
    – meine
    7 янв 2019 в 23:34
  • @meine добавил,извини,что так некрасиво табуляцию произвел,надеюсь поймешь.
    – Elus1ve
    8 янв 2019 в 5:24

1 ответ 1

4

Хочу чтобы лого был на одной строке с меню, я это сделал.

Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.

Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.

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

Выровнить элементы в одну строку можно несколькими способами:

  1. display: inline-block; - данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством.

Пример:

.block {
  height: 100px;
  width: 100px;
  border: 3px solid red;
  display: inline-block;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

  1. float: left/right; - Аналогичное по результату display: inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа <p> с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right

Пример:

.block {
  height: 100px;
  width: 100px;
  border: 3px solid red;
  float: left;
  margin-right: 30px;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

  1. display: flex; - c помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float, clear и vertical-align, а так же свойства, задающие колонки в тексте. И теперь родительскому(.container) элементу добавляем display: flex;. Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

Пример:

.container {
  display: flex;
}

.block {
  height: 100px;
  width: 100px;
  border: 3px solid red;
  margin-right: 30px;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.

Подробнее о свойстве display: flex; Вы можете почитать перейдя по этой ссылке.

Свойство display: inline-block; ссылка

Свойство float: left/right; ссылка

4
  • А как же grid?
    – De.Minov
    8 янв 2019 в 7:50
  • @CbIPoK2513, Хорошо подметили, но, к сожалению, или к счастью, я не так часто вижу его в применении, поэтому и не стал указывать.
    – meine
    8 янв 2019 в 7:53
  • @meine слушай, а как уменьшить картинку в css?Я уменьшаю width и height, а изображение только обрезается
    – Elus1ve
    8 янв 2019 в 12:14
  • @Elus1ve, а как Вы вставляете изображение?
    – meine
    9 янв 2019 в 4:47

Ваш ответ

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

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