Question

我正在尝试在div的一侧放置一个ul列表。 ul应该从div的右侧和顶部开始，并在div的底部结束。

问题是它从div的底部开始，而不是在它的顶部。我该如何解决？

这是我的代码：

＆＃13;

$(document).ready(function() {
	$("#map").prepend('<img src="images/d2.png">');

	var width = $("#map > img").attr("width");
	$("#actions").css("width", width);
});

＆＃13;

body {
	margin:					0;
	padding:				0;
}

nav {
	-webkit-transition:		width 0.3s;
	-moz-transition:		width 0.3s;
	-o-transition:			width 0.3s;
	transition:				width 0.3s;
	position:				fixed;
	height:					100%;
	width:					60px;
	background:				blue;
	z-index:				1;
}

nav:hover {
	width:					200px;
}

div#painel {
	padding-left:			60px;
	background:				red;
	width:					calc(100%-60px);
	display:				block;
	z-index:				0;
	text-align:				center;
}

div#map-container {
	padding:				20px 0 20px;
	width:					100%;
	background:				green;
	text-align:				center;
}

#map-interface,
div#map {
	display:				inline-block;
	border:					0;
	padding:				0;
	margin:					0;
}

#map-interface {
	background:				gray;
	list-style: 			none;
	margin-left:			-4px;
	height:					488px;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
		<nav>
		</nav>

		<div id="painel">
			<div id="map-container">
				<div id="map">
				</div>
				<ul id="map-interface">
					<li>asda</li>
					<li>asd</li>
					<li>asdsad</li>
				</ul>
			</div>
		</div>

		<script src="jquery-1.11.2.min.js"></script>
		<script src="main.js"></script>
	</body>
</html>

＆＃13;

在div #map中，我有一个图像，在列表中我将有一个与图像交互的菜单。 ul列表应该是与图像（或div）大小相同的块。

Answer 1

尝试#map-interface { vertical-align:top; }将内联块内容与其顶部对齐。

Div和ul并排列表

1 个答案: