javascript - Div 和 ul 并排列出-6ren

javascript - Div 和 ul 并排列出

转载作者：行者123 更新时间：2023-11-28 08:10:32

25

4

我想在 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#map 中，我有一个图像，在列表中，我将有一个与图像交互的菜单。 ul 列表应该是一个与图像(或 div)大小相同的 block 。

最佳答案

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

关于javascript - Div 和 ul 并排列出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29297664/

25

4

0

文章推荐： c# - 页面重新加载时触发自动完成

文章推荐： c++ - N 元谓词评估函数 (count_if)

文章推荐： c++ - 现有 DLL 函数的 Typedef 返回函数错误

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

javascript - Div 和 ul 并排列出