我在对齐div内的第二组按钮以导航页面时遇到问题。有2行3个按钮，第二行与第一行不对齐。相反，第一个按钮与导航标题对齐，而不是与第一行中的第一个按钮对齐。我已经包含了所有的html和css，运行代码，你就会看到我的问题。如有任何帮助，我们将不胜感激！
/***********************
NAV PAGE (MAIN)
***********************/
body {
background-image: url('../img/blue-bg.jpg');
}
.greeting {
font-family: 'Lemon Normal 400', sans-serif;
font-size: 45px;
font-weight: bold;
color: yellow;
width: 60%;
}
.question {
font-family: 'Joefin Slab', sans-serif;
text-align: right;
color: white;
}
nav ul {
list-style: none;
text-align: center;
}
a {
text-decoration: none;
color: yellow;
}
a .button {
font-family: 'Cinzel', sans-serif;
font-size: 25px;
}
.button {
width: 205px;
height: 80px;
margin: 20px 15px 15px 20px;
border-radius: 30px;
border: 2px solid yellow;
background: -webkit-radial-gradient(grey, black);
color: white;
vertical-align: middle;
}
.button:hover {
background: -webkit-radial-gradient(yellow, black);
color: blue;
}
.cat_title,
.about_title {
font-family: 'Lemon Mormal 400', sans-serif;
font-size: 40px;
color: grey;
}
.nav {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
width: 60%;
display: inline;
position: absolute;
vertical-align: center;
border-right: 5px solid black;
}
.about {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
width: 35%;
display: block;
float: right;
}
.about-me {
font-family: 'Joefin Slab', sans-serif;
}
p {
font-size: 16px;
color: black;
}
footer {
font-family: 'Joefin Slab', sans-serif;
font-size: 20px;
text-align: center;
clear: both;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Corey's Web Blog!</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cinzel:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<h1 class="greeting">Welcome to Corey's Blog website!</h1>
<p class="question">Questions or comments? <a href="avs302003@yahoo.com">Email me!</a></p>
</header>
<div class="nav">
<nav>
<h1 class="cat_title">Blog Categories</h1>
<ul>
<li> <a href="sports.html"><button type="button" class="button">Sports</button></a></li>
<li> <a href="videogames.html"><button type="button" class="button">Video Games</button></a></li>
<li> <a href="funnystuff.html"><button type="button" class="button">Funny Stuff</button></a></li>
<br>
<li> <a href="general.html"><button type="button" class="button">General/Misc.</button></a></li>
<li> <a href="travel.html"><button type="button" class="button">Travel</button></a></li>
<li> <a href="technology.html"><button type="button" class="button">Technology</button></a></li>
</ul>
</nav>
</div>
<div class="about">
<h1 class="about_title">About the Author</h1>
<img src="">
<p class="about-me">Hello there! My name is Corey Lyons and I'm glad you are visiting my blog page! Feel free to browse the site. I will try to update content once or twice a week. I will find an article on a topic that's under my blog categories and I will do a small one to three paragraph write-up on the subject matter. Now keep in mind this is my opinion and it in no way reflects anyone else's. I understand others will have their own as well. With this in mind, I will try to keep blog posts tasteful and inline. I am interested in building up a portfolio which is how I came up with this idea. Not only that but I also thought it would be a great way to start voicing an opinion more often. I am still learning how to design and develop websites, so I will always be trying to improve this site when I get up to speed with everything!</p>
<p class="about-me">All of the categories here I will blog about are topics that I enjoy reading about. It wasn't until I got some college under my belt when I realized I was a good writer. Mostly just because I didn't blow off writing assignments and large papers until right before they were due, like I did in high school! Anyways, I hope you will enjoy reading and come back again soon for other future blog writeups!.</p>
</div>
<footer>©2014 Corey Lyons</footer>
</body>
</html>您正在尝试将列应用于整个nav元素，该元素也有h1元素。只需从nav 中移动此部件
nav{ -webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;}
至
nav ul{-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;}
我加了一把小提琴，所以你可以看到
编辑：一旦您的问题得到回答，我建议您探索使用另一种方法而不是当前方法的可能性。试着放弃列计数方法，使用这样的方法：
nav ul{display:block}
nav ul li{display:inline-block; width:49%}
虽然元素的顺序会有所不同，但您将获得布局控制和响应能力。此外，您可以尝试使用
nav ul{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-align-content: stretch;
align-content: stretch;}
但这更为复杂。不管怎样，只是一些思考的食物：）
我不是HTML/CSS大师，但。。。
你的h2标题和按钮都在同一个div中，因此当左边的3个按钮到达底部时，它们又从右边开始（在h2标题旁边）。
我想这可以通过创建一个h2div或确保h2占据navdiv的总宽度来解决，这样它就可以"强制"按钮向下？
从<div class="nav"> 中删除column-count: 2
在<div class="nav"> 中将column-count: 2应用于<ul>
因此基于此HTML:
<nav>
<h1 class="cat_title">Blog Categories</h1>
<ul>
<li> <a href="sports.html"><button type="button" class="button">Sports</button></a></li>
<li> <a href="videogames.html"><button type="button" class="button">Video Games</button></a></li>
<li> <a href="funnystuff.html"><button type="button" class="button">Funny Stuff</button></a></li>
<br>
<li> <a href="general.html"><button type="button" class="button">General/Misc.</button></a></li>
<li> <a href="travel.html"><button type="button" class="button">Travel</button></a></li>
<li> <a href="technology.html"><button type="button" class="button">Technology</button></a></li>
</ul>
</nav>
和这个CSS:
.nav {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
width: 60%;
display: inline;
position: absolute;
vertical-align: center;
border-right: 5px solid black;
}
你基本上是在告诉浏览器："获取元素，并将其所有子元素分布在两行中。"由于h1元素是其中一个子元素，它将与导航中的所有其他元素一起渲染，并因此按下所有按钮（因此出现了不需要的分布）。
列计数属性非常适合呈现文本块，甚至用于拆分列表等。它通常不用于常规布局，除非在特殊情况下，因为它从未被设计用于处理大规模页面布局，在这种布局中，许多框模型元素将与许多其他元素推压在一起。
为了以所需的方式布置菜单，我建议使用弹性框方法。Chris Coyier在这个网站上有一个关于flexbox的精彩而强大的教程，你可以在这里找到：
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
我用它玩了你的代码。它让很多其他东西挡住了去路，这就是为什么改变了这么多。格式化显然仍然关闭，但我会让你弄清楚的——但它确实解决了你的导航问题：
<body>
<header>
<h1 class="greeting">Welcome to Corey's Blog website!</h1>
<p class="question">Questions or comments? <a href="avs302003@yahoo.com">Email me!</a></p>
</header>
<div class="nav">
<nav>
<h1 class="cat_title">Blog Categories</h1>
<ul>
<li> <a href="sports.html"><button type="button" class="button">Sports</button></a></li>
<li> <a href="videogames.html"><button type="button" class="button">Video Games</button></a></li>
<li> <a href="funnystuff.html"><button type="button" class="button">Funny Stuff</button></a></li>
</ul>
<ul>
<li> <a href="general.html"><button type="button" class="button">General/Misc.</button></a></li>
<li> <a href="travel.html"><button type="button" class="button">Travel</button></a></li>
<li> <a href="technology.html"><button type="button" class="button">Technology</button></a></li>
</ul>
</nav>
</div>
<div class="about">
<h1 class="about_title">About the Author</h1>
<img src="">
<p class="about-me">Hello there! My name is Corey Lyons and I'm glad you are visiting my blog page! Feel free to browse the site. I will try to update content once or twice a week. I will find an article on a topic that's under my blog categories and I will do a small one to three paragraph write-up on the subject matter. Now keep in mind this is my opinion and it in no way reflects anyone else's. I understand others will have their own as well. With this in mind, I will try to keep blog posts tasteful and inline. I am interested in building up a portfolio which is how I came up with this idea. Not only that but I also thought it would be a great way to start voicing an opinion more often. I am still learning how to design and develop websites, so I will always be trying to improve this site when I get up to speed with everything!</p>
<p class="about-me">All of the categories here I will blog about are topics that I enjoy reading about. It wasn't until I got some college under my belt when I realized I was a good writer. Mostly just because I didn't blow off writing assignments and large papers until right before they were due, like I did in high school! Anyways, I hope you will enjoy reading and come back again soon for other future blog writeups!.</p>
</div>
<footer>©2014 Corey Lyons</footer>
</body>
/***********************
NAV PAGE (MAIN)
***********************/
body {
background-image: url('../img/blue-bg.jpg');
}
.greeting {
font-family: 'Lemon Normal 400', sans-serif;
font-size: 45px;
font-weight: bold;
color: yellow;
}
.question {
font-family: 'Joefin Slab', sans-serif;
text-align: right;
color: white;
}
a {
text-decoration: none;
color: yellow;
}
a .button {
font-family: 'Cinzel', sans-serif;
font-size: 25px;
}
.button {
width: 205px;
height: 80px;
margin: 20px 15px 15px 20px;
border-radius: 30px;
border: 2px solid yellow;
background: -webkit-radial-gradient(grey, black);
color: white;
}
.button:hover {
background: -webkit-radial-gradient(yellow, black);
color: blue;
}
.cat_title,
.about_title {
font-family: 'Lemon Mormal 400', sans-serif;
font-size: 40px;
color: grey;
}
.nav {
border-right: 5px solid black;
display: inline-block;
}
.nav ul{
display: inline-flex;
flex-direction: column;
}
.nav li {
list-style-type: none;
}
.about {
display: inline-block;
width: 50%;
}
.about-me {
font-family: 'Joefin Slab', sans-serif;
}
p {
font-size: 16px;
color: black;
}
footer {
font-family: 'Joefin Slab', sans-serif;
font-size: 20px;
text-align: center;
clear: both;
}
希望能有所帮助！如果你需要更多的帮助，就去问吧。干杯