我记得我之前遇到过这个问题,但我不能强调它记住这个解决方法..我有这个下拉菜单,我为了方便而摆弄。问题是当您将鼠标悬停在点上时,请查看子元素的包装方式,而不是单行显示。我怎样才能正常看待它们?
HTML
<div class='addedForDisplayPurposes'>
<div class="optionsList"> <span>•</span>
<div class="optionsHolder">
<div data-id="asdasd" class="socInt">Add Friend</div> <a href="#">Send Message</a>
</div>
</div>
</div>
CSS
.addedForDisplayPurposes {
width:300px;
}
.optionsList {
display:inline-block;
position:relative;
cursor:pointer;
float:right;
}
.optionsList > span {
font-size:20px;
color:black;
}
.optionsList:hover > span {
color:white;
}
.optionsList:hover .optionsHolder {
display:inline-block;
}
.optionsHolder {
position:absolute;
display:none;
top:0;
right:0;
background:white;
border:solid black 1px;
padding:5px 0 5px 0;
z-index:3;
}
.optionsHolder > * {
padding:5px 10px 5px 10px;
font-weight:bold;
}
.optionsHolder > *:hover {
background:black;
color:white;
}
答案 0 :(得分:1)
进行这些更改,您的问题就会得到解决。
.optionsHolder {
position: absolute;
display: none;
top: 15px;
right: 0;
background: white;
border: solid black 1px;
padding: 5px 0 5px 0;
z-index: 3;
width: 140px;
}
修改强>
如果您无法对width
进行任何更改,请为文本添加white-space:nowrap;
以包装在一行中。
对于实例,
.optionsHolder {
position: absolute;
display: none;
top: 15px;
right: 0;
background: white;
border: solid black 1px;
padding: 5px 0 5px 0;
z-index: 3;
white-space:nowrap;
}
希望现在有所帮助。
答案 1 :(得分:0)
另一种方法是使用display属性:
.optionsList:hover .optionsHolder {
display: table;
}
.optionsHolder {
position:absolute;
display:none;
top:0;
right:0;
background:white;
border:solid black 1px;
padding:5px 0 5px 0;
z-index:3;
}
.optionsHolder > * {
padding:5px 10px 5px 10px;
font-weight:bold;
display: table-cell;
}
对于.optionsHolder
,设置display: table
,对于子元素,请设置display: table-cell
。
这将允许子元素显示在父级中具有缩小到适合宽度的单行上。