我不能移动我的同伴......在我的主要地方?

时间:2015-09-24 15:39:20

标签: html css html5 css3 element

编辑#2:修正了我已添加到我的代码position: absolute; top 130px; display:block;感谢所有响应...代码集上的代码也已修复..:D

编辑:所以我修复了内容持有者的问题,现在我有一个新的,我不能把他移到我的主...我一直在尝试垂直对齐,它不起作用Codepen:http://codepen.io/anon/pen/VvKdrL

我的新代码:

header>a
{
	font-size: 38px;
	font-weight: 500;
	border-bottom: 1px solid #888;
	text-align: left;
	color: #555;
	font-family: "Monserat";
}

header
{
	border-bottom:1px solid #888;
}

main
{
	height: 530px;
	display: block;
	margin-top: -40px;
}

ul
{
	list-style-type: none;
}

li a
{

	font-size: 22px;
	font-family: Helvetica;
	margin: 4px;
	font-weight: 500;
	font-family: "Roboto";
	line-height: 34px;
	color: #222;
}

a
{
	text-decoration: none;
}

li::before
{
	content: "➢";
}

.center
{
	width: 960px;
	margin: 0 auto;
}

.content-holder
{
	position: absolute;
    width: 250px;
    height: 200px;
    top: 130px;
    background: #eee;
    display: block;
    z-index: 2;    
}

.background
{
	z-index: 1;
	background-repeat: no-repeat;
}

.footer
{
	border-top: 1px solid #888;
	height: 20px;
	content:
}
<html>
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header class="center">
		<a href="index.html" class="header">Name</a>
	</header>
	<main class="center sizemain">
		<div class="background"></div>
		<div class="content-holder">
				<ul>
					<li>
						<a href="#" class="special" target="_blank">List </a>
					</li>
					<li>
						<a href="#" target="_blank">List </a>
					</li>
					<li>
						<a href="#" target="_blank">List</a>
					</li>
					<li>
						<a href="#" target="_blank">List</a>
					</li>
					<li>
						<a href="#" target="_blank">List</a>
					</li>
				</ul>
		</div>
	</main>

		<footer class="footer">

		</footer>



</body>
</html>

感谢回复

1 个答案:

答案 0 :(得分:0)

您需要注释保证金最高保证金。保证金适用于每一方50px。

.content-holder {
    width: 250px;
    height: 190px;
    background: #eee;
    /* margin: 30px; */
    /* margin-top: 50px; */
    vertical-align: 50px;
    z-index: 2;
}

请参阅:http://www.w3schools.com/css/css_margin.asp