绝对div的宽度变得很小，文本正在包裹

Question

当我按下按钮时，我想制作一个当我悬停按钮时出现的div，虽然我的宽度和位置都有问题。

问题可以在下面的图片和jsfiddle中看到。当我对相对按钮做出绝对的东西时，看起来它的最大宽度变成了按钮的宽度。如果按钮很小，悬停div也会很小。如何使用width:auto生成正常的悬停div？

http://jsfiddle.net/ghpc9fwk/

Answer 1

只需添加white-space: nowrap;属性即可防止文本在最近的场合包装;）

以下是一个有效的例子：http://jsfiddle.net/1revewwm/

我还修改了bottom属性

Answer 2

不确定这是否适合您，但您可以使用::before伪元素来实现此类布局。

.alt-test{    
    background-color:blue;    
    display:inline-block;
    margin:0;
    padding:0;
    position:relative;    
    margin-bottom:20px;
}

.alt-test::before{
    content:"";
    display:block;
    height:10px;
    width:10px;
    background:red;
    position:absolute;
    left:0px;
    top:-10px;    
}

JSFIDDLE

Answer 3

这样的东西？

<div class="button">
    <div class="alt">Click here now!</div>
</div>

.button{
    width:10px;
    height:10px;
    background-color:red;
}
.alt{
    margin-top: 10px;
    display: none;
    background-color:blue;
    width: auto;
    white-space: nowrap;
}

.button:hover .alt{
    display: inline-block;
}

<强> Updated Fiddle

Answer 4

您可以使用position: relative;将您的按钮和alt容器包装在另一个div中。 Example fiddle

HTML：

<div class="wrapper">
    <div class="button"></div>
    <div class="alt">Click here now!</div>
</div>

CSS：

.wrapper {
    position: relative;
}

.button{
    width:10px;
    height:10px;
    background-color:red;
    position:relative;
}

.alt{
    position:absolute;
    background-color:blue;
    display: none;
}

.button:hover + .alt {
    display: block;
}

Answer 5

如前所述，一个简单的解决方案是将white-space:nowrap添加到您的alt /字幕div中，因此它会延伸直到您插入一些<br>

另外

我建议你不要使用

bottom: -[something]px

但要使用

top: 100%。

这样按钮的高度可以变化。

我相应地修改了你的JSFiddle：http://jsfiddle.net/ghpc9fwk/3/