标签格式中的HTML和CSS标签
[英]HTML & CSS Tags within Tags Formatting
问题描述
I have the following HTML Code: 
我有以下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>
My challenge is to make the "My Page" h1 in line, as stated in the CSS 我的挑战是如“CSS”中所述，使“我的页面”h1排成一行
header h1 {
margin:0;
display: inline;
}
In order to get the h1 header "My Page" to go inline with the unordered list, I need to move the h1 in the HTML to underneath of the <nav> opening tag (as opposed to where it is now underneath of the header opening tag), but I can't figure out why it will go inline when I do that but it won't when I leave it like it currently is. 为了使h1标题“My Page”与无序列表一致，我需要将HTML中的h1移动到<nav>开始标记的下方（而不是它现在位于标题开头的下方）标签），但是当我这样做时，我无法弄清楚为什么它会内联，但是当我离开时它不会像现在这样。
It is my understanding that in CSS if you have the following: 据我所知，在CSS中你有以下内容：
header h1{
some styling here;
}
...that any h1's underneath of header will be affected, however, that is not happening in my code currently. ...但是，标题下面的任何h1都会受到影响，但目前我的代码中没有发生这种情况。
3 个解决方案
解决方案1
1 已采纳 2016-11-03 19:57:03
Your h1 does have the display inline, but the problem is that it is next to nav which is a block level element. 你的h1 确实有内联显示，但问题是它是nav旁边，这是一个块级元素。 Block elements take up as much width as they can, while inline elements only take up as much width as necessary (see w3schools ). 块元素占用的宽度尽可能多，而内联元素只占用所需的宽度（参见w3schools ）。 You'll need to change the display on the nav to inline or inline-block to stop it from taking up so much width. 您需要将nav上的显示更改为inline或inline-block以防止它占用太多宽度。
解决方案2
0 2016-11-03 20:01:07
当你的ul和h1 inline ，你没有用你的nav ，它仍然有display: block css属性并占用全宽。
解决方案3
0 2016-11-03 20:18:40
As other told you, the element is style displayed as a block. 正如其他人告诉你的那样，元素的样式显示为块。
By the way, if you don't want "any h1's underneath of header to be affected" by that : 顺便说一句，如果你不希望“标题下面的任何h1受到影响”：
header h1{
some styling here;
}
You can write it this way : 你可以这样写：
header + h1 {
some styling here;
} }
Selects all "h1" elements that are placed immediately after "header" elements
Source : http://www.w3schools.com/cssref/css_selectors.asp 资料来源： http ： //www.w3schools.com/cssref/css_selectors.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.