Html 绝对div'；s的宽度变得非常小，以至于文本正在换行

当我制作一个按钮时，我想制作一个当我悬停按钮时出现的div，尽管我对它的宽度和位置有问题

问题可以在下面的图片和JSFIDLE中看到。当我对相对按钮进行绝对设置时，看起来它的最大宽度变成了按钮的宽度。如果按钮很小，悬停div也会很小。如何使用

宽度：auto

创建正常的悬停div

---

不确定这是否适合您，但您可能可以使用

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

---

不确定这是否适合您，但您可能可以使用

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

---

只需添加一个

空白：nowrap属性以防止文本在最近的场合换行；）

下面是一个工作示例：

我还修改了
bottom
属性
只需添加一个
空白：nowrap属性以防止文本在最近的场合换行；）

下面是一个工作示例：

我还修改了
bottom
属性
类似的内容

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

像这样的东西

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

您可以使用
位置：relative将按钮和alt容器包装在另一个div中

HTML:

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

HTML:

如前所述，一个简单的解决方案是将
空白：nowrap
添加到alt/caption div中，这样它会一直延伸到插入一些


另外
我建议你不要使用

bottom:-[something]px

但是使用

top:100%

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

我相应地修改了JSFIDLE:
前面提到的一个简单解决方案是将
空白：nowrap
添加到alt/caption div中，这样它会一直延伸到插入一些


另外
我建议你不要使用

bottom:-[something]px

但是使用

top:100%

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

我相应地修改了您的JSFIDLE:
如果您想设置最大宽度，这不起作用如果您想设置最大宽度，这不起作用
.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;
}