Div and ul list side by side

Div and ul list side by side

本文关键字：side by list ul and Div      更新时间：2023-09-26

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

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

这是我的代码：

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

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

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

相关文章：