Question

一些CSS的简单问题我无法修复，我想知道你是否可以帮助我。我有一个简单的标题，左边是徽标，右边是导航（两个浮点数）。我将导航及其列表绑在一起，标题中的徽标作为简单的ID“徽标”。目前，徽标不会与导航相同，所以我面对的是我的徽标占据了标题左侧的很大一部分，我的导航（尺寸小得多）占据了右侧侧。我希望它们在同一条线上（虽然不是两者都在导航中）所以我可以管理边距和填充。这是我的代码：

<header>
    <a href="index.html" id="logo">
    <img src="img/logo.png">
    </a>

<nav>
     <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
     </ul>

</nav>
</header>

CSS：

header{
  float: left;
  margin: 0 0 15px 0;
  padding: 5px 0 -60px 0;
  min-width: 100%;
  width: 100%;
}

#logo {
 margin: 5px 0 0 70px;
 padding-top: 7px;
 display: inline-block;
 max-width: 100%;
}


/***************
NAVIGATION
****************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 5px 0 0 5px;
}

nav ul {
  list-style: none;
  margin: 0 30px;
  padding: 0 30px 0 0;
  float: right;
}
nav li{
  display: inline-block;
  font-size: 1.5em;
}

nav a{
  font-weight: 800;
  color: #fff;
  padding: 5px 10px 2px;
}

非常感谢！

Answer 1

设置标题的
display：inline-block;或显示：内联;

或者为每个头元素赋予一个具有相同类的div容器，并将显示设置为该类的内联或内联块

将导航与标题中的徽标对齐的问题

1 个答案: