div中的中心按钮，没有正确排列

时间：2014-09-30 21:15:05

标签： html css

我在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>&copy;2014 Corey Lyons</footer>
 </body>
</html>

4 个答案:

答案 0 :(得分：0)

我没有HTML / CSS大师但是......

你的h2标题和按钮都在同一个div中，这就是为什么当左边的3个按钮到达底部时它们再次从右边开始（在h2标题旁边）。

我认为这可以通过创建一个h2 div或确保h2占用nav div的总宽度来解决，因此它会强制＆＃34;强制＆＃34;按钮向下？

答案 1 :(得分：0)

您尝试将列应用于整个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;}

我添加了fiddle，您可以看到

编辑：一旦您的问题得到解答，我建议您探索使用其他方法而非当前方法的可能性。尝试放弃列计数方法并使用类似的东西：

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;}

但这更复杂。无论如何，只是一些值得思考的东西：）

答案 2 :(得分：0)

从column-count: 2

中删除<div class="nav">

将column-count: 2应用于<ul>

中的<div class="nav">

答案 3 :(得分：0)

所以基于这个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元素是其中一个子元素，因此它将使用导航中的所有其他元素进行渲染，并因此将所有按钮向下推（因此不需要的分布）。

列计数属性对于渲染文本块甚至拆分列表等都很方便。除了特殊情况外，它通常不用于一般布局，因为它从来没有设计用于处理大规模页面布局。有许多盒子模型元素与许多其他元素相抗衡。

要以所需的方式布置菜单，我建议使用flex-box方法。 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>&copy;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;
}

希望有所帮助！如果您需要更多帮助，请询问。干杯！

相关问题
最新问题