我在我的 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 © 2016 Stephen Fawcett, All rights reserved
</strong>
</footer>
</main>
</body>
</html>最佳答案
ul 元素具有默认填充值。所以删除它。
ul {
padding: 0;
}
这也将解决您的空白灰色空间问题。
关于html - 我如何将菜单按钮放在左侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38967539/