我有以下 HTML 代码:
body {
margin: 0;
}
header {
background: #999;
color: white;
padding: 15px 15px 0 15px;
}
header h1 {
margin: 0;
display: inline;
}
nav ul{
margin: 0px;
display: inline;
}
nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}
nav ul li a{
color:white;
}<!doctype html>
<html>
<head>
<title>CSS Layouts</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Blog</li>
<li><a href="#"></a>About</li>
<li><a href="#"></a>Contact</li>
<li><a href="#"></a>Links</li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>2016 My Site</footer>
</body>
</html>我的挑战是使“我的页面”h1 符合 CSS 中的规定
header h1 {
margin:0;
display: inline;
}
为了让 h1 标题“我的页面”与无序列表内联，我需要将 HTML 中的 h1 移动到 <nav> 的下方打开标签(而不是它现在位于页眉开始标签下方的位置)，但我不明白为什么当我这样做时它会内联，但当我像现在这样离开时它不会。
据我了解，在 CSS 中，如果您有以下内容:
header h1{
some styling here;
}
...标题下方的任何 h1 都会受到影响，但是，目前我的代码中没有发生这种情况。
最佳答案
您的 h1 确实 具有内联显示，但问题是它紧挨着 block 级元素 nav。 block 元素占用尽可能多的宽度，而内联元素只占用必要的宽度(参见 w3schools )。您需要将 nav 上的显示更改为 inline 或 inline-block 以阻止它占用太多宽度。
关于标签格式中的 HTML 和 CSS 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40410044/