我想在 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/