Я пытаюсь выровнять мое меню по центру по горизонтали, выравнивая логотип по левому краю и выбор языка по правому краю. что я не могу понять, так это как сохранить одинаковые пропорции при изменении размера. Я перепробовал много предложений, но не нашел ни одного, который бы подходил моей панели навигации. Вот что я пытаюсь:
< Сильный > CSS
.nav-bar img {
float: left;
}
.nav-bar {
height: 70px;
width: 100%;
}
#container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.nav-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
#menu {
float: left;
}
#languages {
float: right;
}
< Сильный > HTML:
<div id="container">
<img id="logo" src="image.svg">
<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact us</a></li>
</ul>
<ul id="lang-bar">
<li><a href="#">En</a></li>
<li><a href="#">Fr</a></li>
</ul>
</div>
</nav>
2 ответа
Вы можете использовать text-align:center
для контейнера, сделать ul
встроенные блоки и расположить логотип и языковое меню в верхнем левом и правом верхнем углу:
html,
body {
margin: 0;
}
#container {
width: 100%;
text-align: center;
position: relative;
background: #ddd;
}
#container ul {
list-style: none;
display: inline-block;
}
#container ul li {
display: inline-block;
margin-right: 1em;
}
#logo {
position: absolute;
left: 0;
}
#lang-bar {
position: absolute;
right: 0;
}
<div id="container">
<img id="logo" src="image.svg">
<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact us</a></li>
</ul>
<ul id="lang-bar">
<li><a href="#">En</a></li>
<li><a href="#">Fr</a></li>
</ul>
</div>
Вы можете использовать flex
на родительском элементе, и вы можете использовать justify-content: space-between
, чтобы отделить 3 дочерних элемента flex, но это не будет по центру логотипа. Вместо этого я бы включил flex-grow: 1
с flex-basis: 0
для дочерних элементов flex (или flex: 1 0 0;
для краткости), чтобы они занимали равное количество места, а затем выровнял содержимое в дочерних элементах flex соответствующим образом. Вы можете использовать align-items: center
в главном контейнере, чтобы выровнять все по вертикали, если хотите.
#container {
justify-content: space-between;
align-items: center;
}
#container > * {
flex: 1 0 0;
}
#lang-bar {
flex-direction: column;
align-items: flex-end;
}
#logo {
max-width: 100px;
}
.flex {
display: flex;
}
#menu {
justify-content: center;
list-style: none;
}
#menu li {
margin: 0 .5em;
}
<div id="container" class="flex">
<div class="logoContainer">
<img id="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<ul id="menu" class="flex">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact us</a></li>
</ul>
<ul id="lang-bar" class="flex">
<li><a href="#">En</a></li>
<li><a href="#">Fr</a></li>
</ul>
</div>
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].