Навигация по центру сверху, оставляя логотип слева и выбор языка справа

Question

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

< Сильный > 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>

html css

0

JulioBordeaux 24 Апр 2017 в 21:34

Answer 1

Вы можете использовать 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>

1

Johannes 24 Апр 2017 в 18:47

Answer 2

Вы можете использовать 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>

1

Michael Coker 24 Апр 2017 в 19:40

Навигация по центру сверху, оставляя логотип слева и выбор языка справа

2 ответа

Новые вопросы

html