Как сделать заголовок с логотипом слева и навигацией справа?

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

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

Как это:

Существуют ли какие-либо решения? Я могу только думать о том, чтобы заголовок родительского контейнера приспосабливал его высоту к дочерним контейнерам, но я не знаю, как это реализовать. Или я должен каким-то образом использовать медиа-запросы?

Я написал следующий код.

header { 
 
    height: 100px; 
 
    background-color: gray; 
 
    background-image: url('img/background.gif'); 
 
} 
 
#logo { 
 
    float: left; 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<header> 
 
    <img id="logo" src="images/logo.png"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#contacts">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

источник

2017-02-04 Rusletov

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

Вы можете использовать модель flex или min-height + overflow для работы с элементами флоаттинга. Вы также можете использовать оба вместе, свойства float будут перекрыты flex, если они поддерживаются. ,

header { 
 
    min-height: 100px; 
 
    background-color: gray; 
 
    background-image: url('img/background.gif'); 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
    overflow:hidden; /* for float if flex not supported */ 
 
} 
 
#logo { 
 
    float: left; 
 
    /* to deal with flex */ 
 
    flex-shrink:0; 
 
    margin:auto;/* or 0 or auto auto auto 0 or ... */ 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<header> 
 
    <img id="logo" src="http://dummyimage.com/140x45&text=logo.png"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#contacts">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

источник

2017-02-04 13:18:03

Попробуйте иметь свой Li дисплей "рядный блок"? Я думаю, вам придется снять блокировку «li a». Тогда вам может потребоваться задать ширину набора для самой ul, чтобы она уменьшалась со страницы или использовала медиа-запросы. Надеюсь, это поможет :)

источник

2017-02-04 13:17:24 BMT

Как сделать заголовок с логотипом слева и навигацией справа?

ответ

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