未定义父宽度时，下拉菜单断开
是指在网页开发中，当下拉菜单的父元素没有明确指定宽度时，下拉菜单可能会出现断开的情况。
下拉菜单通常是通过CSS和JavaScript实现的，它们依赖于父元素的宽度来确定自身的位置和显示方式。如果父元素的宽度没有被明确指定，浏览器会根据默认的布局规则进行处理，这可能导致下拉菜单的位置计算错误，从而导致菜单断开。
为了解决这个问题，可以采取以下几种方法：
- 明确指定父元素的宽度：通过CSS设置父元素的宽度，可以确保下拉菜单能够正确地相对于父元素进行定位。例如，可以使用
width属性来设置宽度值，或者使用max-width属性来限制宽度的最大值。 - 使用相对定位：将父元素的定位属性设置为
relative，可以使下拉菜单相对于父元素进行定位。这样，即使父元素的宽度未定义，下拉菜单仍然可以正确地相对于父元素进行定位。 - 使用绝对定位：将下拉菜单的定位属性设置为
absolute，并设置left和top属性来确定菜单的位置。这样，下拉菜单将相对于最近的具有定位属性的父元素进行定位，而不受父元素宽度未定义的影响。 - 使用浮动：将父元素和下拉菜单都设置为浮动，可以使它们相对于页面进行定位，而不依赖于父元素的宽度。这种方法需要注意清除浮动，以避免对其他元素的布局产生影响。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
我见过很多水平菜单，它们的下拉菜单都有固定的宽度，像这样的它是工作的，但是…
我试着做一个合乎逻辑的大小，宽度，如父级或更多。我的解决方案是，但它有点吓人(重复使用jQuery)：
<ul>
<li><a href="#">very long item like this</a>
<ul>
<li><a href="#">small item 1</a></li>
<li><a href="#">sm
浏览 2提问于2012-06-23得票数 0
我有一个由如下列表构建的菜单：
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
列表中的子菜单项仅在将鼠标悬停在其父列表元素上时才会显示。但是，子列表元素的宽度将强制父元素具有相同的宽度，并且当您悬停菜单时，它
浏览 1提问于2014-04-25得票数 0
2回答
有人对此有什么问题吗？px和em工作得很好，%则不做任何事情。我只想在IE8中扩展这个div屏幕的长度。请给我微软。我已经找了一段时间了。
CSS
#topPane {width:100%;
height:100px;
background-color:#0C9;}
HTML
<div id="topPane">a</div>
浏览 1提问于2010-03-07得票数 1
除非我在标签之间提供文本，否则输出不会出现。有办法解决这个问题吗？提前感谢
HTML代码
.Top {
height: 20%;
width: 80%;
background: linear-gradient(#bc581e, #e27b36);
border-radius: 50% 50% 0 0;
box-shadow: inset -15px 0 #c15711;
margin: 2% auto;
position: relative;
}
<div clas
浏览 0提问于2019-01-09得票数 0
回答已采纳
在我的顶尖班级中，我有以下几点非常出色的工作：
public class TestA<E extends Test>
{
List<Vector<E>> list;
String name, location;
TestA(String name, String location)
{
this.name = name;
this.location = location;
list = new ArrayList<Vector<
浏览 0提问于2012-12-20得票数 5
回答已采纳
2回答
有人能告诉我为什么这个代码不能工作吗？
<div id="dojam_text_container" style="width: 300px; height: 300px;
margin:auto; background-color:Blue;">
<div style="display:table-cell; vertical-align:middle;">
<span id=
浏览 2提问于2014-03-07得票数 0
当我的窗口大小小于710 is时，我想删除下拉菜单。问题是，当我从小(<710)到大(>710)时，drow下拉菜单不会再次出现。
首先，我尝试了:tried{}，但有些方法保存了.hover函数。在此之后，我尝试了您可以在这里看到的代码。现在，它没有为if-语句保存变量"UlLiUl“(控制台上写着:未定义)。
在这个链接中，您将看到我正在尝试的站点：。你能帮帮我吗？我还是jQuery的新手。
$(document).ready (function () {
DropDownMenu();
$(window).bind('resize',
浏览 1提问于2015-12-06得票数 2
回答已采纳
我试图在保持其纵横比的同时，使用css自动地将图像安装到它的容器上。这张图片的高度太高，无法在手机屏幕上显示。我正在使用这个css，它看起来应该可以工作，但是它只调整图像的宽度变化，而不是高度。
body {
background-color: #0055AF;
overflow-x: visible;
}
#new_site_teaser {
width: 405px;
height: 683px;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
#new_site_teas
浏览 0提问于2015-03-27得票数 0
回答已采纳
3回答
这是我的代码：
<div class="container-fluid">
<div class="carousel slide" data-ride = "carousel" style="position: relative">
<div class="carousel-inner" role="listbox">
<div class="item active"&
浏览 0提问于2016-02-25得票数 1
回答已采纳
1回答
我已经创建了一个带有悬停下拉菜单的产品列表菜单，即当用户将鼠标悬停在特定菜单上时，该列表将自动显示。但是有两个问题，首先是我想把蔬菜下拉菜单分成3列。其次，当我正确地将鼠标悬停在蔬菜和香料下拉菜单之间时，蔬菜和香料的下拉菜单都开始抖动。
我不明白为什么会发生这样的事情。请帮帮忙。我上传stackblitz链接是因为代码很大。
浏览 12提问于2019-07-07得票数 0
3回答
我知道我可以使用text-align: center的CSS样式来对引导带下拉元素进行居中。这将按需要对下拉菜单进行居中。但是，当我单击该菜单以激活它，并出现项目列表时，它将相反地对齐父div的左侧。我想让下拉菜单的左边边缘与您单击以激活它的按钮的左侧边缘同步(就像如果下拉菜单在默认情况下是与左边对齐的话)。这个是可能的吗？
浏览 3提问于2015-08-30得票数 0
回答已采纳
1回答
我在尝试使第二级UL具有基于父LI的100%宽度而不是像现在这样的第一级UL时遇到了问题。如果可能的话，我也在尝试只使用css。我试图弄清楚这一点的原因是，这样我就可以将下拉菜单放在父级的中间。
为了更好地理解，我试图模仿当你将鼠标悬停在男性上方时的导航下拉菜单：
<ul> <----first level
<li>
<ul> <----second level
<li></li>
</ul>
</li>
</ul>
浏览 0提问于2012-03-23得票数 1
我是HTML/CSS的新手，我还在学习。
我刚刚创建了一个下拉菜单按钮，这是代码
如您所见，导航菜单只有“男装”按钮和下拉菜单。
我试图复制这段代码，并在“男装”按钮旁边设置第二个下拉菜单按钮。
问题是，当我复制“男装”按钮的代码时，第二个按钮不会对齐“男装”按钮，而是显示在下面。
这就是我想要实现的目标：
浏览 2提问于2014-02-27得票数 0
回答已采纳
1回答
为了让您理解我的意思，我创建了一个JSfiddle 。基本上，如果你看下拉菜单上的“产品”和“联系我们”，每个列表项目是足够宽，以适应内容。这给下拉菜单一个‘坏’的外观。我希望所有的清单项目都和清单上最宽的项目一样宽。(要了解我的意思，请看附件中的模型)。
这也是因为“优先链接”。“主页”和“关于我们”有一个底部的边框，当你悬停在它们上面时，当你继续并在下拉菜单上悬停时，也会产生一些刺激，即下拉菜单向上移动5 5px。我不知道怎么解决这个问题。
非常重要：我不想为列表项设置静态宽度！
它应该是什么样子的模型：
//Ignore this comment
浏览 1提问于2013-02-25得票数 1
回答已采纳
当你点击origin的时候，下拉菜单运行得很好，但是当你点击外部，也就是html主体时，什么都不会发生。我希望在.scroller目录之外单击时，下拉菜单也会关闭。有什么建议吗？
浏览 1提问于2011-11-11得票数 0
3回答
对于CSS下拉菜单，我通常使用下拉菜单。这项技术运行得非常好，但有一件小事一直困扰着我:下拉链接的宽度总是固定的。
有没有办法自动调整Suckerfish下拉菜单中菜单项的宽度？如果没有，有没有其他基于CSS的下拉菜单策略可以做到这一点？
浏览 3提问于2010-09-05得票数 2
回答已采纳
我在我的网站上使用自定义主题，它需要jquery.min.js，所以下拉菜单可以工作，但是当我使用select2时，jquery文件似乎被调用了两次。
这是细节。
当我在我的main.php上调用jquery时，我的下拉菜单可以工作，但是我的select2不能工作，并且得到了TypeError: jQuery(...).select2 is not a function错误
但是，当我不在main.php上调用jquery时，下拉菜单就不能工作，并且会出现这样的错误。
错误:引导程序的JavaScript需要jQuery bootstrap.min.js:6:37 ReferenceE
浏览 2提问于2016-08-09得票数 0
1回答
我有一个CXCursor，它在C++中标记函数声明的位置。我知道如何得到方法名，或者USR.但是如何获得类名(方法是其中的一部分)
我使用libclang解析的代码是：
Number3D* ParseObjectFace::RetFaceVertex(){
// some code...
}
当我试图打印我使用的游标信息时：
clang_getCString(clang_getCursorUSR(cr));
//output "c:@C@ParseObjectFace@F@RetFaceVertex#"
clang_getCString(clang_getCursor
浏览 4提问于2014-01-28得票数 3
回答已采纳
我现在有一个从Dash Core组件到Dash Bootstrap组件的下拉菜单中的检查表，我目前有一些问题，需要将检查表的宽度与打开时的下拉列表的宽度相同。现在的情况如下：
组件的python代码如下：
html.Div([
dbc.DropdownMenu([
dcc.Checklist(
id='hand-filter',
options=[
{'label
浏览 2提问于2021-11-27得票数 0
回答已采纳
我有一个模板
<template name='order'>
{{vendor.name}}
</template>
渲染时使用
Template.order.vendor = function () {
return {name: 'Chanel', address: 'Paris' };
};
当我尝试在中访问this.data时
Template.order.rendered = function () {
console.log(this.data);
};
我得到了“未定义的”。
在Tem
浏览 0提问于2013-07-17得票数 7
回答已采纳
我的网站：
我的问题：
AMP Facebook评论插件没有显示测试站点：阅读at：和my代码是：At header:
<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
在我的贴子上：
<amp-facebook-comments width="486"
height="657"
浏览 2提问于2019-12-17得票数 0
回答已采纳
在这里学习html/css。我正在尝试为我的.menu ul li ul li添加一个底部边框
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
border-bottom: 1px solid #911;
}
但是右边的边框被切掉了，因为在这个样式中有正确的填充：
.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #911;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCC
浏览 0提问于2011-11-17得票数 0
回答已采纳
1回答
堆栈内部颤振
、、
我想在Stack中放置Stack，如果我改变内部Stack的定位部件的位置，它就不起作用了。
作品：
Stack(
children: [
Positioned(
top: 150.0,
child: Text("Text#1"),
),
Positioned(
top: 100.0,
child: Stack(
children: [
Positioned(
child: Text("Tex
浏览 0提问于2018-10-22得票数 13
回答已采纳
在为客户工作时，我被允许访问客户的Google搜索控制台属性。现在我怎么才能把我的Google帐户从他们的属性中断开，小心不把它们全部删除呢？在属性的下拉菜单中，我只看到Manage property和Delete property的选项。
浏览 0提问于2018-08-07得票数 5
回答已采纳
3回答
我一直在尝试编辑我的下拉菜单，以便子项在父项下方居中。我最终实现了居中，但发现每次我将鼠标悬停在父项目上以显示下拉菜单时，菜单的其余部分都会掉到下拉菜单的底部。
这是到样本的链接，它的一侧有所有的编码。提前感谢您的帮助！我刚开始使用CSS和HTML，无论我看了多少视频和教程，我似乎就是不能正确地使用它：
浏览 1提问于2017-04-08得票数 0
有一个特定的CSS行为，我想更好地理解。这与一个具体的问题无关，我只是在调试一个网站时遇到了这个问题。
让我们在一个固定位置的div中有一个全宽度的图像。
<div style="position:fixed">
<img
style="width:100%"
src="https://via.placeholder.com/150x300.png"
/>
</div>
这将以原来的大小呈现图像。因此，我的假设是，浏览器会查看图像的祖先元素，直到找到一个具有定
浏览 1提问于2021-09-15得票数 2
回答已采纳
我有一个用JavaScript附加到文档中的overlay元素。下面是它的样式声明：
#overlay_mask {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background-color: #000000;
}
它的大小可以正确地延伸到窗口的高度，但当用户滚动时，覆盖图不会跟随。
html和body元素设置为width: 100%；和height: 100%。覆盖图是文档的第
浏览 1提问于2012-11-24得票数 1
回答已采纳
我已经搜索了之前的堆栈帖子，并尝试了我能找到的所有方法，但遗憾的是，都没有奏效。
我的下拉菜单在jsfiddle中运行良好：
但是，当我使用firefox或safari预览代码时，"services“链接下的下拉菜单不会直接排在"services”链接按钮下，并且当我尝试向下移动鼠标时，下拉菜单消失。
顺便说一句，感谢所有回答这些问题的人。这个网站过去帮了我很多忙，但不幸的是这是我第一次发帖。
浏览 0提问于2012-10-05得票数 3
回答已采纳
1回答
我试图在黑莓应用程序中创建一个HorizontalFieldManager，我希望字段左对齐，这是HFM的默认布局，但我想显示一个BitmapField右对齐，setMargin(0, 0, 0, Display.getWidth() - bitmap.getWidth())工作正常直到我在管理器中添加其他字段，请有任何想法。
浏览 0提问于2014-04-03得票数 1
回答已采纳
这是我的密码。使用引导4.1框架：
<div class="container">
<div class="d-none d-md-block">
<div class="d-flex justify-content-center">
<img class="logo" src="logo2.png">
<p>
<p>
</div>
</div>
和CSS：
.logo
浏览 0提问于2018-12-24得票数 0
回答已采纳
3回答
我想在我的网站上添加一个下拉菜单到我们的服务菜单项。您可以在上查看开发位置。如果你将鼠标放在我们的服务上，你会看到下拉菜单出现了，但所有的项目都有不同的宽度。怎样才能使它们的宽度相同呢？我所有的尝试都是这样的，所以我对此深表歉意。提前感谢您的帮助！
浏览 0提问于2011-01-25得票数 0
回答已采纳
2回答
我正在寻找一种方法来获得下拉菜单> li是开放的，总是出现在同一位置顶部。
当我们启动第一个下拉菜单时
当我们启动其他下拉菜单> li >a时
我使用的是引导3，不要担心我已经完全删除的响应，我需要从第一个下拉菜单> li> a的同一顶部开始所有下拉菜单。
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
// border-radius: 4px;
浏览 0提问于2014-04-02得票数 1
回答已采纳
所以我想做的是将文本div垂直居中，并将其扩展到窗口大小，以便对所有大小都有响应。这是我的小提琴：
<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="error-number">404</div>
</div>
浏览 1提问于2016-01-17得票数 2
4回答
当屏幕宽度减小时，我尝试将所有菜单链接放在一个下拉菜单中。
到目前为止，我所做的是在表单中为菜单下拉菜单编写HTML代码
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" class="mobile_form">
<select name="order" class='mobile_menu'>
<option value =
浏览 0提问于2013-01-02得票数 0
回答已采纳
我是Swift的初学者，刚刚开始学习如何制作iOS应用程序。我正在使用Swift 4。我在练习如何创建下拉菜单时遇到了一个问题，当我从下拉菜单中选择一个选项时，并不显示所选选项的所有文本。请查看下面的照片，以便更好地理解我的意思。
正如你在第二张图片中看到的，选择的文本是这样显示的"Area...umber 1"，我希望它像这样显示"Area Number 1“。
请帮帮忙，谢谢！
浏览 4提问于2018-11-29得票数 0
html
<div class="Slider_2">
<div class="Slider2_warpper">
<div class="Slider2_Content_A"></div><!-- end Silder2_Content_A -->
<div class="Slider2_Content_B"></div><!-- end Silder2_Content_B -->
<div class="Slider
浏览 0提问于2015-07-21得票数 0
我在引导4中创建了一个下拉菜单。我将下拉按钮和下拉菜单放在一个带有class=“容器”的div元素中，我希望下拉切换和下拉菜单能够获得其父元素的全部宽度。我写了这段代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<button class="dropdown-t
浏览 0提问于2018-09-09得票数 5
回答已采纳
1回答
好的，我有一个导航栏，其中包含使用内联块样式显示的链接列表。我使用了一个媒体查询，这样当我将屏幕调整到更小的大小时，如果列表不再适合在栏上，它就会转换为下拉菜单，其中有一个按钮可以帮助切换下拉菜单的可见度。该按钮使用以下简单的jquery代码工作：
$(document).ready(function() {
$("#nav-menu").click(function(){
$("#nav-links").slideToggle("down");
});
});
(#nav-菜单是按钮的id，而#nav-链接是列表
浏览 3提问于2014-02-15得票数 1
回答已采纳
3回答
将下拉菜单安装在较小的显示器中
、、、、
好吧，我有个问题还没弄清楚。
所以，基本上我使用的是引导，如果用户想注册的话，我会尝试为他创建一个部分。
问题是，如果我有一个iPhone3GS，并想进入我的页面，下拉菜单太大，不能在屏幕上！(如下所示)
我添加的下拉菜单，是来自引导程序的菜单。
有什么办法解决这个问题吗？
/--------------------------------------/
在为媒体添加css菜单后，最大宽度为4xx px。
浏览 5提问于2015-01-23得票数 0
回答已采纳
2回答
考虑以下情况：
.form-container {
background-color: red;
}
.search-form {
display: flex;
align-items: flex-start;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span cl
浏览 3提问于2021-10-05得票数 0
回答已采纳
1回答
我有个问题。这是我在wordpress中用基石在x主题中建立的网站。问题是，导航菜单太多，导致屏幕宽度问题在980 to到大约1100 to左右，导航菜单低于品牌标识。是否有办法控制折叠按钮在达到一定宽度时触发？
对不起，win xp这只是个站点的测试pc。
浏览 0提问于2015-11-29得票数 0
回答已采纳
我正在尝试自定义使用CSS导航条，但有问题，如何使子菜单的100%宽度。目前看来是固定的。当没有足够的空间显示整个菜单时，我也在试图找出如何使子菜单显示在下拉菜单的两边。
信息。目前，无论子菜单的大小如何，它们都会出现在菜单的右侧。
我尝试过在CSS中添加各种位置:并显示:标记。
海军条形码：
CSS代码：
/*****顶部菜单*/ .navbar {页边: 0；背景：#fff；边框: 0；-moz-边框-半径: 0；-webkit-边框-半径: 0；边框-半径: 0；}ul.nabar-导航{字体大小:14 5px；颜色：#888；文本转换:大写；}ul.nabar-nav
浏览 1提问于2019-01-30得票数 0
我试图在第三个名为"widget-3“的li元素周围放置一个填充，但它并没有应用填充。有人能帮我找出为什么会发生这种情况吗？
CSS
.footer-widgets {
width: 93.75%;
max-width: 1000px;
margin: 0px auto;
}
.footer-widgets li {
width:24%;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
float: left;
浏览 0提问于2012-02-05得票数 0
回答已采纳
1回答
我用超级鱼插件实现了下拉菜单。在IE(version 8,9，10)中，这是可以的，但是当我将浏览器模式(F12)更改为兼容性视图时，菜单的右侧会收缩。当我鼠标移动时，它就变得正确了。如何解决这个问题？
浏览 6提问于2013-10-22得票数 0
回答已采纳
2回答
我在这里创建了一个简单的JsFiddle： --我不能让下拉菜单停留在其父容器之外，同时当列表元素比父容器更宽时，扩展到更宽。
我试过用
overflow: visible
但没有希望，我做错了什么？
浏览 0提问于2014-12-24得票数 1
回答已采纳
我正在制作一个简单的表单布局，标签和编辑文本在彼此前面(水平线性布局，每个权重为1)。我必须使编辑文本右对齐。当文本在文本视图中超出时，它会在视图的左边缘被裁剪，这是很明显的。
我希望文本从右边裁剪，而不是从左边通过仍然有重力到右边。iOS会将文本滚动到第一个字符，但android不会！
What I have tried till now :
1. Putting it in scrollview : Align right not work in this case
有没有办法强制textview让文本从一开始就可见，同时保持重力呢？
浏览 0提问于2015-06-24得票数 0
我使用的是JScrollpane版本12，但在早期版本中也遇到了同样的问题。
当我将段落或长句设置为斜体时，文本将位于IE8中垂直滚动条的下方。所有其他浏览器和版本都工作得很好，但IE8并非如此。
有没有人能帮我解决一下IE8的问题？当我将斜体改回正常字体时，IE8可以正常工作
提前谢谢你，Mirjam
浏览 1提问于2013-01-31得票数 0
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.abcd{
width: 100%;
}
</style>
<body>
<div class="abcd">
<img src="color.jpg" >
</div>
</body>
color.jpg分辨率为2560x1440，屏幕分辨率为1920x1080。图像
浏览 0提问于2018-03-24得票数 0
回答已采纳
2回答
我有两个问题：
第一个是:我想把一个包含许多按钮的视图放在选项卡视图之上。即使我切换到任何选项卡，我也想看到那个视图。这怎么可能呢？
第二:当我点击视图中的按钮时，我能处理这个事件吗？怎么弄到？
任何建议都是欢迎的。谢谢。
浏览 2提问于2015-10-29得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
