HTML/CSS：在同一水平线上允许网站的导航栏和标题出现问题答案

【问题标题】：HTML/CSS: Having trouble allowing Navigation Bar and Title of the website on the same horizontal lineHTML/CSS：在同一水平线上允许网站的导航栏和标题出现问题
【发布时间】：2021-02-26 03:01:20
【问题描述】：

我无法将网站标题与导航栏和社交媒体徽标放在同一水平线上。目前，我的代码只允许我将上面一行的标题作为社交媒体和导航栏。自从我几天前开始使用 HTML/CSS 编程以来，我在网上搜索了所有资源，但找不到问题所在。

这是我的代码：

.top {
  margin: auto;
  padding: 0.5em;
  overflow: hidden;
  background-color: black;
  width: 100%;
  top: 0;
  display: block;
  position: sticky;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  z-index: 100;
}

.top p {
  color: white;
  font-size: 10px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.center {
  text-align: center;
}

.center a {
  color: rgb(224, 224, 228);
  font-size: 1.5em;
}

.center a:hover {
  text-decoration: none;
  color: rgb(224, 224, 228);
}

.nav a {
  color: white;
}

.nav ul {
  list-style-type: none;
  display: inline-block;
}

.nav li {
  display: inline;
}

.nav {
  float: right;
}

.logos {
  float: left;
}

.logos a:hover {
  text-decoration: none;
}

.logos a {
  color: white;
}

.top {
  clear: both;
  overflow: hidden;
}

.nav li a {
  color: white;
  text-align: center;
  padding: 20px 15px;
  text-decoration: none;
  font-size: 13px;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<div class="top">
  <div class="center">
    <h><a href="J.html">J[a]son</a></h>
    <p>Personal Blog</p>
  </div>
  <div class="top">
    <div class="logos">
      <a href="https://www.facebook.com/jason.ahn.129/" class="fa fa-facebook"></a>
      <a href="https://www.linkedin.com/in/jasonja-ahn/" class="fa fa-twitter"></a>
    </div>
    <div class="nav">
      <ul>
        <li><a href="J.html">HOME</a></li>
        <li><a href="#photography">PHOTOGRAPHY</a></li>
        <li><a href="#coding">CODING</a></li>
        <li><a href="#about">ABOUT</a></li>
      </ul>
    </div>
  </div>
</div>

【问题讨论】：

你使用了两倍宽度为 100% 的 .top 类，.center 似乎也是一个块，跨越了可用宽度的 100%。
我应该删除.top..中的宽度吗？不知道该怎么做..
如果您在同一行上需要 3 个容器，请查看 flex css-tricks.com/snippets/css/a-guide-to-flexbox 。大多数时候width:100% 块容器是个坏主意，如果在父级中有边框或填充，那就太多了。

标签： html css alignment center

【解决方案1】：

这是一个 flex 示例，没有宽度：

你真的很亲密。

.top {
  display: flex;
  margin: auto;
  padding: 0.5em;
  background-color: black;
  top: 0;
  position: sticky;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  z-index: 100;
}

.top p {
  color: white;
  font-size: 10px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.center {
  text-align: center;
}

.center a {
  color: rgb(224, 224, 228);
  font-size: 1.5em;
}

.center a:hover {
  text-decoration: none;
  color: rgb(224, 224, 228);
}

.nav a {
  color: white;
}

.nav ul {
  list-style-type: none;
  display: inline-block;
}

.nav li {
  display: inline;
}

.nav {
  float: right;
}

.logos {
  float: left;
}

.logos a:hover {
  text-decoration: none;
}

.logos a {
  color: white;
}

.top {
  clear: both;
  overflow: hidden;
}

.nav li a {
  color: white;
  text-align: center;
  padding: 20px 15px;
  text-decoration: none;
  font-size: 13px;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<div class="top">
  <div class="center">
    <h><a href="J.html">J[a]son</a></h>
    <p>Personal Blog</p>
  </div>
  <div class="top">
    <div class="logos">
      <a href="https://www.facebook.com/jason.ahn.129/" class="fa fa-facebook"></a>
      <a href="https://www.linkedin.com/in/jasonja-ahn/" class="fa fa-twitter"></a>
    </div>
    <div class="nav">
      <ul>
        <li><a href="J.html">HOME</a></li>
        <li><a href="#photography">PHOTOGRAPHY</a></li>
        <li><a href="#coding">CODING</a></li>
        <li><a href="#about">ABOUT</a></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：