这是代码，我确信它在 css 中很简单，但我已经尝试对齐文本并缩进它，但它没有做任何事情，但我希望标题位于靠近菜单的左侧
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>ConCoder</title>
<link href="sideMenu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" >
</head>
<body>
<nav>
<ul>
<li> <a href="index.html" class="selected"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li><a href="#"><i class="fa fa-comment"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-thumb-tack"></i> Post Jobs</a>
<ul>
<li><a href="#">Type 1</a></li>
<li><a href="#">Type 2</a></li>
<li><a href="#">Type 3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-tasks"></i> Browse Jobs</a>
<ul>
<li><a href="#">Type 1</a></li>
<li><a href="#">Type 2</a></li>
<li><a href="#">Type 3</a></li>
<li><a href="#">Type 4</a></li>
<li><a href="#">Type 5</a></li>
<li><a href="#">Type 6</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-pencil"></i> Contact</a></li>
<li class="login"><a href="#"><i class="fa fa-user"></i> Login</a>
<form class="pure-form pure-form-stacked">
<fieldset>
<label for="email">Username</label>
<input id="email" type="email" placeholder="Username">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="remember" class="pure-checkbox">
<button class="pure-button ">Sign In</button>
</fieldset>
</form>
</li>
</ul>
</nav>
<h1>Test</h1>
</body>
</html>
side-menu.css
body {
background-color: #A3A3A3;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: medium;
}
nav {
background: #666;
padding-top: 12em;
width: 12em;
position: absolute;
top: 0;
bottom: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul a:hover, ul a:focus {
background-color: #333;
}
nav ul li {
position: relative;
}
nav ul li a {
text-align: left;
display: block;
padding: 1em 1em 1em 3em;
color: #A3A3A3;
text-decoration: none;
}
nav ul li ul {
width: 10em;
background: #666;
position: absolute;
right: -10em;
top: 0px;
display: none;
}
nav ul li ul:last-child {
border-radius: 0 15px 15px 0;
}
nav ul li ul li:first-child a:hover {
border-radius: 0 15px 0 0;
}
nav ul li ul li:last-child a:hover {
border-radius: 0 0 15px 0;
}
nav ul li:hover > ul {
display: block;
}
a.selected {
background-color: #33F;
}
.pure-form {
padding-left: 2em;
width: 13em;
background: #666;
position: absolute;
right: -15em;
top: 0px;
display: none;
border-radius: 0 15px 15px 0;
}
.login:hover .pure-form {
display: block;
}
最佳答案
只需添加相对位置或绝对位置，您就会看到测试标题:
<h1 style="position:relative;">Test</h1>
关于html - 无法将我网站的主要文本放在侧边菜单旁边，例如标题和其他信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21693694/