我正在创建 web map 。我有一个 div
在 map 顶部,单击后最大化并显示自定义 attribute window
.属性窗口显示基于 map 中其他操作的数据。属性窗口目前在顶部有 4 个按钮,它们将根据选择的按钮更改窗口的内容。
map 上的操作将向我的 Python flask Web 服务发送请求,该服务返回格式为 <ul><li></li><ul>
的数据我想在 attribute window
中显示.
我目前遇到的问题是文本超出了窗口 - 可能是因为我有 div
设置为 position: absolute
.但是有什么办法解决这个问题吗?
这是一个可用的 CodePen(单击顶部的 div):
https://codepen.io/anon/pen/oeJGdm
感谢您的任何建议。
最佳答案
为了保持您的结构,我建议进行一些更改,我仅包括此答案中的更改。
首先在#atributeWindow 中为.nav 留出空间。
#attributeWindow {
padding-top: 30px; /*to accomodate nav bar*/
...
}
将导航移动到#attributeWindow 的顶部填充区域。
.nav{
top: 0;/* to place at top;*/
...
}
内容将放在 .nav 下方,因为在 #attributeWindow 中进行了填充。所以删除这个填充。
.attributeContent{
/*padding-top:30px; remove this padding.*/
...
}
最后去掉display:inline
#test1{
/*display: inline;*/
...
}
关于html - 是否可以将此文本保留在设置了绝对位置的 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45974089/