Как настроить логотип и параметры меню на одном уровне?

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

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

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

Заранее спасибо.

div.header_container { 
 
    font-family: tamarillo-jf, sans-serif; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    border: solid blue 10px; 
 
} 
 

 
div.logo_container { 
 
    border: solid red; 
 
    float: left; 
 
} 
 

 
h1.logo { 
 
    padding: 10px; 
 
    margin: 0; 
 
    color: forestgreen; 
 
    font-family: tamarillo-jf, sans-serif; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
} 
 

 
div.nav_container { 
 
    border: solid pink; 
 
    float: right; 
 
    overflow: auto; 
 
    margin: 0; 
 
} 
 

 
li.option { 
 
    display: inline; 
 
    padding: 10px; 
 
    list-style-type: none; 
 
    font-size: 25px; 
 
    margin: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: forestgreen; 
 
}

<!DOCTYPE HTML> 
 

 
<html> 
 
    
 
    <head> 
 
     <title>Home | Business</title> 
 
     <link rel = "stylesheet" href = "style.css"> 
 
     <!--fonts--> 
 
     <script src="https://use.typekit.net/yhm2vpr.js"></script> 
 
     <script>try{Typekit.load({ async: true });}catch(e){}</script> 
 
    </head> 
 
    
 
    <body class = "home_page"> 
 
     
 
     <!-- "banner" with logo and navigation options --> 
 
     <div class = "header_container"> 
 
      
 
      <div class = "logo_container"> 
 
       <h1 class="logo">Business Name</h1> 
 
      </div> 
 
      
 
      <div class = "nav_container"> 
 
       <ul class = "nav_ops"> 
 
        <li class = "option"><a href="#about us">about us</a></li> 
 
        <li class = "option"><a href="#classes">classes</a></li> 
 
        <li class = "option"><a href="#services">services</a></li> 
 
        <li class = "option"><a href="#get involved">get involved</a></li> 
 
        <li class = "option"><a href="#contact us">contact us</a></li> 
 
        <li class = "option"><a href="#donate">donate</a></li> 
 
       </ul> 
 
      </div> 
 
      
 
     </div> 
 
     
 
     <p>Hello, there!</p> 
 
    </body> 
 
</html>

источник

2016-10-05 Lucia

пар быстрых предложений: В ваших стилях, нет необходимости в div.header_container. Просто .header_container будет работать. Также лучше использовать тире вместо подчеркиваний, чтобы назвать ваши классы и идентификаторы. См. Http://stackoverflow.com/questions/1696864/naming-class-and-id-html-attributes-dashes-vs-underlines –

У вас есть два варианта, которые я могу видеть

Вариант 1 - Добавьте это после nav_container в header_container

//html 
<br class='clear'/> 

//Styles 
.clear { 
    clear: both; 
}

Вариант 2 - Удалить поплавки из logo_container и nav_container и использовать гибкую недвижимость на header_container

.header_container { 
    display:flex; 
    justify-content: space-between; 
    align-items: center; 
}

источник

2016-10-05 02:27:13

Спасибо! Вариант 2 работал отлично! – Lucia

Как настроить логотип и параметры меню на одном уровне?

ответ

Смежные вопросы