HTML элементы/CSS позиции

Question

Я пытаюсь сделать это:

и шахты выглядит следующим образом:

Не самая красивая вещь. Мои вопросы:

1. У нас есть заголовок с логотипом, панель поиска, меню и кнопка. Как я могу собрать их все в ряд?
2. На div с фоновым изображением - как я могу разместить заголовок, как тот, который находится на исходном сайте?

Answer 1

1) Взгляните на документацию Navbar component. Элементы уже должны быть встроенными, если они выполнены правильно. Вы можете использовать классы navbar-left и navbar-right для позиционирования элементов в навигационной панели.

2) Вы заметите, что большой текст центра начинается с того же места, что и логотип navbar. Это из-за класса контейнера. Я предлагаю вам проанализировать examples, чтобы узнать, как правильно реализовать контейнер.

После этого, если вы все еще пытаетесь добавить свои стили.css на свой пост в pastebin или лучше создать Codepen - это позволит кому-то быть более полезным.

Answer 2

1- вы можете написать float: left; или float: right; ? искать этот float

2-для положения элемента необходимо создать относительный DIV позже внутри создать абсолютный DIV .. и вы можете указать расчет координат с правом верхними левым нижним углу .. смотрите здесь position

Answer 3

Я бы сказал, float не является хорошей практикой. Если у вас действительно нет выбора для использования.

Но на основе того, как я смотрю на это. Это достигается с помощью flex.

Положите дисплей: flex на ваш главный div Затем, как и для других элементов. Используйте дисплей: flex-grow

Это выгодно использовать flex. , не только это решит вашу проблему. Это делает ваш сайт отзывчивым.

Приветствия

Answer 4

[![if you need all navigation item in one line. you have to make display:inline-block,for navigation. 

change your code to: 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap"> 
       <ul class="pull-left"><li><a href="#" class="logo"></a></li> 
       </ul> 
       <ul class="pull-left">     
        <li class="formSearch"> 
         <input type="text" placeholder="Find Freelancers" id="searchButton"> 
        </li>    
        <li><a href="#">Browse</a></li> 
        <li><a href="#">How it works</a></li> 
       </ul> 
       <ul class="pull-right"> 
        <li> 
         <a href="#" class="signupHover"> 
          <span class="icon signup"></span> 
          <a href="#">Sign Up 
          </a> 
         </a> 
        </li> 
        <li> 
         <a href="#" class="loginHover"> 
          <span class="icon login"></span> 
          <a href="#">Login</a> 
         </a> 
        </li> 
       </ul> 
       <button type="button" id="buttonHeader">Become a freelancer</button> 
      </div> 

/*add below css*/ 

.nav-wrap ul li{display:inline-block;}][1]][1]