logo标签列表

HTML和CSS标签中的标签格式化

htmlcss
3

I have the following HTML Code:

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中的要求使“My Page”标题与其他内容水平对齐。

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

为了使h1标题“我的页面”与无序列表一行显示，我需要将HTML中的h1移动到<nav>开放标签之后（而不是现在在头部开放标签下面），但我无法弄清楚为什么当我这样做时它会一行显示，但如果保持目前的状态它就不会。
据我的理解，在CSS中，如果您具有以下内容：
header h1{
    some styling here;
}

在我的代码中，header下面的任何h1都不会受到影响，但实际情况并非如此。

你的 nav 是 block。那是浏览器默认设置。你应该将其改为 inline。 - pol
3个回答
1
你的 h1 标签确实设置为了内联元素，但问题在于它紧挨着一个块级元素 nav。块级元素会尽可能占据整个宽度，而内联元素只会占据必要的宽度（详见 w3schools）。你需要将 nav 的显示属性改为 inline 或者 inline-block，以防止它占据过多的宽度。
0

当你将你的 ul 和 h1 设置为 inline 时，你并不会对你的 nav 进行同样的操作，它仍然具有 display: block 的 CSS 属性，并占据整个宽度。

0

正如其他人告诉你的那样，<header> 元素的默认显示样式是块级元素。

顺便说一下，如果你不希望“在页眉下方的任何 <h1> 受到影响”，可以这样做：

    header h1{
    some styling here;
}

你可以这样写：
header + h1 {
some styling here;

}

选择所有紧接在“header”元素后面的“h1”元素。
来源：http://www.w3schools.com/cssref/css_selectors.asp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接