Элементы Flex расположены неправильно - PullRequest
Новая
       3

Элементы Flex расположены неправильно

1 голос
/ 05 мая 2020

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

Пример того, что я вижу:

Items not Aligning

Пример. У этого они смещены от центра в противоположном направлении. 

header {
  background: #001021;
}

.logo {
  overflow: auto;
}

.logo h1 {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 2.42em;
  color: #7E7F9A;
  text-align: center;
  max-width: 90%;
}

.logo img {
  max-width: 100%;
  float: left;
  border: double;
  border-width: 5px;
  background-color: #372248;
}

.menu-bar span {
  background-color: #372248;
  padding: 2px 40px;
  border-top-style: double;
  border-bottom-style: double;
  font-size: 30px;
  position: relative;
  bottom: 0;
  margin: auto;
}

.menu-item {
  position: relative;
  bottom: -6px;
}

.menu-bar {
  /*display: grid;
        display-template-columns: 2fr 1fr 2fr 2fr 2fr ;
        column-gap:20px;
        align-items: stretch;*/
  display: flex;
  justify-content: left;
  align-items: center;
  text-align: center;
  margin: auto;
}
image

Ответы [ 2 ]

2 голосов
/ 05 мая 2020

Этот символ HTML (☱) имеет другое значение line-height, чем обычные слова в других интервалах, и поэтому мы видим смещение; исправьте это, установив значение line-height для этого элемента следующим образом: 

.menu-bar span {
    line-height: 1rem;
}

кстати, я удалил ненужный атрибут из некоторых классов css, добавив перед ними - так что вы можете исследовать их; и попробуйте больше селекторов c вместо tag names. В любом случае просмотрите фрагмент ниже: 

header {
        background: #001021;
  }
 .logo {
        overflow:auto;
  }
  
  .logo h1 {
        font-family: 'Cinzel Decorative', cursive;
        font-size: 2.42em;
        color: #7E7F9A;
        text-align: center;
        max-width: 90%;
        
   }
  
  .logo img {
        max-width: 100%;
        float: left;
        border: double;
        border-width: 5px;
        background-color: #372248;
   }
  .menu-bar span {
        background-color: #372248;
        padding: 2px 40px;
        border-top-style: double;
        border-bottom-style: double;
        font-size:30px;
        line-height:1rem;
        -position:relative;
        -bottom: 0;
        -margin: auto;
  }
  .menu-item {
        -position:relative;
        -bottom: -6px;
   }
  .menu-bar {
        /*display: grid;
        display-template-columns: 2fr 1fr 2fr 2fr 2fr ;
        column-gap:20px;
        align-items: stretch;*/
        display: flex;
        -justify-content: left;
        align-items: center;
        text-align: center;
        -margin: auto;
  }
image
0 голосов
/ 05 мая 2020

Есть две проблемы, вызывающие проблему.

Во-первых, у вас есть смещение текстовых пунктов меню с относительным позиционированием. 

.menu-item {
  position: relative;
  bottom: -2px;
}

Это нарушает выравнивание.

Во-вторых, строка меню, созданная объектом HTML в первом гибком элементе, обрабатывается иначе, чем текст. Вы могли убедиться в этом, заменив его буквами ( demo ). Это также нарушает выравнивание.

Простым решением было бы удалить смещение относительного позиционирования и установить для гибкого контейнера значение align-items: baseline. 

header {
  background: #001021;
}

/* .logo {
  overflow: auto;
} */

.logo h1 {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 2.42em;
  color: #7E7F9A;
  text-align: center;
  max-width: 90%;
  margin-top: 0; /* new */

}

.logo img {
  max-width: 100%;
  float: left;
  border: double;
  border-width: 5px;
  background-color: #372248;
}

.menu-bar span {
  background-color: orange; /* changed for demo */
  padding: 2px 40px;
  border-top-style: double;
  border-bottom-style: double;
  font-size: 30px;
  position: relative;
  bottom: 0;
  margin: auto;
}

/* .menu-item {
  position: relative;
  bottom: -6px;
}
*/

.menu-bar {
  /*display: grid;
        display-template-columns: 2fr 1fr 2fr 2fr 2fr ;
        column-gap:20px;
        align-items: stretch;*/
  display: flex;
  /* justify-content: left; */
  /* align-items: center; */
  text-align: center;
  margin: auto;
  align-items: baseline; /* new */
}
image
...