如何按内容设置宽度？

enter image description here

悬停至极出现一个提示：

enter image description here

正如你所看到的问题是，它的宽度是由父元素，是有可能工具提示的宽度将由它的内容自动决定？

HTML：

<div class="icon"> 
    <span class="tooltip">Debian: 20%</span> 
    <span class="icon-lin-debian" style="opacity:0.2"></span> 
</div>

CSS：

div.icon{ 
    position:relative; 
    display: inline-block; 
} 

span.tooltip { 
    display: none; 
    position: absolute; 
    line-height: 20px; 
    width: 100%; 
    left:0; 
    right:0; 
    padding: 10px; 
    font-size: 14px; 
    text-align: center; 
    background: #000; 
    border: 1px solid #353535; 
    border-radius: 5px; 
    top: -45px; 
    z-index: 100; 
} 

span.tooltip:after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-width: 10px; 
    border-style: solid; 
    border-color: #353535 transparent transparent transparent; 
    top: 40px; 
    left: 20px; 
    z-index: 100; 
}

附：还有其他的话，所以我不能自己设置宽度。

来源

2013-02-17 user1692333

你什么时候显示工具提示？ – 2013-02-17 15:37:01

尝试删除'left：0;右：0;'和'宽度：100％'。 – 2013-02-17 15:37:02

@ExplosionPills悬停图像 – user1692333 2013-02-17 15:52:21

默认情况下，子元素将保留在其父元素内。这是通过包装内容和/或展开父元素来完成的。

在这种情况下，父元素扩展为包含子元素，因为在父级上没有设置显式宽度。为了让子元素看起来超出父元素，您需要设置父元素的宽度，以便在子元素变得太宽时不会展开，然后您需要设置子元素元素’宽度要比其父母宽’。然后，您可以在父元素上指定overflow: visible;，以允许子级完全显示，即使它们在父级之外延伸。

来源

2013-02-18 01:07:05 kevincoleman

如何按内容设置宽度？

回答

相关问题