Question

我试图创建一个网站的标题，其徽标和名称位于左侧，标签位于中心。我有两个div，第一个包含徽标和名称，另一个包含选项卡（列表）。但是它们并没有在水平方向上对齐，而是一个div低于另一个div。我用过float，但是它似乎不起作用，因为我希望其他div和元素与float div发生冲突。我知道有人问过类似的问题，但它们对我不起作用。

.header {
  width: 100%;
  border: solid red;
}

#trademark {
  border: solid green;
  width: 15%;
}

#logo {
  width: 70px;
}

#logoName {
  float: right;
}

#divList {
  border: solid black;
  width: 50%;
  text-align: center;
  margin-left: 25%;
}

#list li {
  display: inline;
  margin: 20px;
}

<div class="header">
  <div id="trademark">
    <img src="images/coin.png" id="logo">
    <h2 id="logoName">Halo</h2>
  </div>
  <div id="divList">
    <ul id="list">
      <li>About</li>
      <li>TCH</li>
      <li>Partners</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

没有错误如何不根据需要进行格式化

Answer 1

尝试

.header {
  width: 100%;
  border: solid red;
}

#trademark {
  border: solid green;
  width: 20%;
  display: flex;
}

#logo {
  width: 70px;
}

#logoName {
  float: right;
}

#divList {
  border: solid black;
  width: 50%;
  text-align: center;
  margin-left: 25%;
}

#list li {
  display: inline;
  margin: 20px;
}

<div class="header">
  <div id="trademark">
    <div class="icon">
      <img src="images/coin.png" id="logo">
    </div>
    <h2 id="logoName">Halo</h2>
  </div>
  <div id="divList">
    <ul id="list">
      <li>About</li>
      <li>TCH</li>
      <li>Partners</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

如何在不冲突的情况下将两个div彼此对齐？

1 个答案: