漂浮儿童宽度

时间:2013-08-26 11:18:25

标签: html css

我记得我之前遇到过这个问题,但我不能强调它记住这个解决方法..我有这个下拉菜单,我为了方便而摆弄。问题是当您将鼠标悬停在点上时,请查看子元素的包装方式,而不是单行显示。我怎样才能正常看待它们?

http://jsfiddle.net/N45P7/

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;
}

2 个答案:

答案 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)

使用CSS表格显示类型

另一种方法是使用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

这将允许子元素显示在父级中具有缩小到适合宽度的单行上。

演示小提琴:http://jsfiddle.net/audetwebdesign/DmbMV/