Question

我有以下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>

我的挑战是如“CSS

”所述，将“我的页面”h1排成一行

header h1 {
    margin:0;
    display: inline;
}

为了使h1标题“My Page”与无序列表一致，我需要将HTML中的h1移动到<nav>开始标记的下方（而不是现在的位置）在标题开头标记的下面），但是当我这样做时，我无法弄清楚为什么它会内联但是当我离开它时它不会像现在一样。
据我所知，在CSS中你有以下内容：

header h1{
    some styling here;
}

...标题下面的任何h1都会受到影响，但目前我的代码中没有这样做。

Answer 1

您的h1 显示内联，但问题是它位于nav旁边，这是一个块级元素。块元素占用的宽度尽可能多，而内联元素只占用所需的宽度（参见w3schools）。您需要将nav上的显示更改为inline或inline-block，以阻止它占用太多宽度。

Answer 2

当您制作ul和h1 inline时，您不能使用nav进行操作，它仍然拥有display: block css属性并占据全宽。

Answer 3

正如其他人告诉你的那样，元素的样式显示为一个块。

顺便说一句，如果您不希望“标题下面的任何h1受到影响”：

    header h1{
    some styling here;
}

你可以这样写：

header + h1 {
some styling here;

}

选择紧跟在“标题”元素
之后的所有“h1”元素

来源：http://www.w3schools.com/cssref/css_selectors.asp

HTML＆amp;标记格式

3 个答案: