Question

我在HTML文档上创建了一个垂直导航菜单，我想知道如何将按钮对齐到左边而不是面向菜单右边的按钮。我也想知道如何让它下面的灰盒更薄，所以当我的菜单按钮在左边时，它不会在右边留下一个大的空白区域。

这是我的代码：

body {
  background-color: #101010;
}
.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}
nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background-color: rgb(157, 34, 60);
  background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
  background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
  background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
  background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  letter-spacing: .5rem;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="cssTest.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <div id="header">
      <h1><img class="displayed" src="img/banner.png"/></h1>
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="blog.html">Blog</a> 
          </li>
          <li>
            <a href="news.html">News</a>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
    <section>
      <article>
        <h2>This is the section</h2>
        <p style="color: #50FFFF; font-size: 16px;
    				text-shadow:
    				 0px 0px 2px #1040FF,
    				-2px -2px 2px #1040FF,
    				 2px -2px 2px #1040FF,
    				-2px 2px 2px #1040FF,
    				 2px 2px 2px #1040FF;">
          This is my home page of my test HTML web page. Right now i am using a HTML style on this paragraph. It uses a hexidecimal color, font size of 16 px and text shadow.
        </p>
      </article>
    </section>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

如何将菜单按钮放在左侧？

0 个答案: