时间戳

首页 > 解决方案 > 弹性项目未正确排列

html - 弹性项目未正确排列

问题描述

我正在尝试制作的弹性盒子有问题。出于某种原因，弹性框中的一项显示比所有其他项低 2 或 3 个像素，我终其一生都无法弄清楚为什么或如何修复它。我试过弄乱不同项目的位置，但要么它们都移动但仍然不对齐，要么它们都不对齐。

我所看到的示例：

项目未对齐

例子。这个让他们偏离中心相反的方向。

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;
}
<header>
  <section class="logo">
    <div class="logo-image">
      <img src="images/logo.png" alt="MA Logo">
    </div>
    <div class="title">
      <h1>Mystic Arms Campaign</h1>
    </div>
    <section class="menu-bar">
      <div class="sidebar-icon">
        <span style="cursor:pointer" onclick="openNav()">&#9776;</span>
      </div>
      <div class="menu-item">
        <span>Home</span>
      </div>
      <div class="menu-item">
        <span>About</span>
      </div>
      <div class="menu-item">
        <span>Documents</span>
      </div>
    </section>
  </section>
</header>

标签： htmlcssflexbox

解决方案

HTML character( &#9777;) 与其他跨度中的普通单词具有不同的line-height值，这就是我们看到位移的原因；line-height通过在该元素上设置值来修复它，如下所示：

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

顺便说一句，我通过-在它们之前添加 a 从某些 css 类中删除了一些不必要的属性，以便您可以调查它们；并尝试更具体的选择器而不是tag names.anyway 看看下面的代码片段：

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;
  }
<header>
	  <section class="logo">
	    <div class="logo-image">
	      <img src="images/logo.png" alt="MA Logo">
		</div>
		<div class="title">  
	      <h1>Mystic Arms Campaign</h1>
		</div>
		<section class="menu-bar">
		  <div class="sidebar-icon">
		    <span style="cursor:pointer" onclick="openNav()">&#9777;</span>
		  </div>
		  <div class="menu-item">
		    <span>Home</span>
		  </div>
		  <div class="menu-item">
		    <span>About</span>
		  </div>
		  <div class="menu-item">
		    <span>Documents</span>
		  </div>
		</section>
	  </section>
	</header>

推荐阅读