html - 如何正确定位关闭按钮

Question

每个人！我是一名长期的 Web 开发人员和设计师，但这个让我目瞪口呆。我有一个带有关闭按钮的警报（这不是 Bootstrap）。它在主页上显示正常：

但是当我在提交页面上放置相同的警报时，它会将关闭按钮向下移动：

有任何想法吗？这是我的 HTML：

<div class="alert">
    <div class="alertContents">
        When you submit yo stuff, it comes up in the feed right away.
        <div class="alertClose">&times;</div>
    </div>
</div>

和 CSS：

.alert {
    width: 100%;
    background-color: #DD7474;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: #FBFBFC;
    margin: auto;
    border-radius: 2px;
    border-color: transparent;
    border-width: 0px;
    border-style: solid;
}
.alertContents {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
}
.alertClose {
    float: right;
    width: auto;
    height: auto;
    color: #FBFBFC;
    cursor: hand;
}

谢谢！

Answer 1

.alert {
 position:relative;
}
.alertClose {
 position:absolute;
 top:5;
 right:5;
}

这可能是你需要的。在此链接上查看 #4 http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 2

我会使用：

    position: absolute;

然后添加

    left: 250px;

编辑：将这些代码添加到您的 css 中......哦，回头看看发生了什么，您也许可以确保有一个：

    clear: both;

像这样的功能：

    <div class="clear"></div> 

或者

    <br clear="all" />