Question

所以我正在为我正在建设的网站整理一些警报系统。布局非常简单：

<style>
     #alert{
         position:absolute;
         padding:10px;
         display:table;
         margin:0 auto;
     }
</style>
<div id="alert">
    Hey user, I have a very important message for you.
</alert>

现在，如果一个元素没有绝对定位，我通常使用display:table来确保它只占用必要的宽度，但绝对定位它的那种废墟。

有没有办法让元素只占用必要的宽度，但仍然绝对定位？

修改：
基本上我正在寻找的是一个绝对定位的元素，它具有动态宽度，并且居中。

Answer 1

这似乎可以解决问题：

<style>
    #alert {
         position:absolute;
         width:100%; /* Keep in mind this is for an entire page */
         height: 16px; /* Match the font-size of the alert */
         text-align:center;
         cursor:pointer;
    }
    #alert #inner_alert {
         display:inline-block;
         padding:10px;
    }
</style>
<div id="alert">
    <div id="inner_alert">Here is the message!</div>
</div>

这将生成一个居中的元素，该元素只有它需要的宽度并且绝对定位。

Answer 2

嘿，现在您可以使用left或right属性，就像这样

#alert{
    position:absolute;
    padding:10px;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

嘿，现在您可以根据布局

在left right top bottom中定义您的值

如果您定义position absolute而非定义div width or height

现在您可以使用这个实时演示http://jsfiddle.net/YvMAJ/

如何使绝对定位的元素仅使用必要的宽度？

2 个答案: