javascript - Margin-top/Padding-top 没有效果？

Question

我正在构建一个 jQuery 表单字段验证器，目前我正致力于在 CSS 中构建弹出通知。

问题是，无论 margin 的应用如何，我都无法让 .notification-point 与 .notification-body 的中心对齐-top/padding-top 属性。

这是我的 JsFiddle 的链接:http://jsfiddle.net/Z6Jtd/8/

任何帮助/编辑将不胜感激!

Answer 1

解决方案:http://jsfiddle.net/vonkly/Z6Jtd/9/

给你。

注意:我稍微更改了您的 javascript。我删除了 .fadeOut；我强烈建议为 .focusout() 创建一个函数 - 或者更好的是，检测值的变化，当它匹配所需的规则时，隐藏消息。

---

对于 future 的读者:

这个问题的解决方案是将 marker(“point”)和 body(“message”)包装在一个容器中，并使用 position: relative; 就可以了。

然后，我使用 position: absolute; 和 top: 8px 定位标记。

接下来，我将 margin-left: 12px 添加到 message 以便不与标记重叠。

CSS

input[type="text"], input[type="password"] {
    display: inline-block;
    font: bold 13px Arial;
    color: #555;
    width: 300px;
    padding: 8px 10px;
    border: 0;
}

.notify-wrap {
    position: relative;
    display: none;
}

.notify-point {
    position: absolute;
    top: 8px;
    display: inline-block;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
    border-width: 6px;
}

.notify-body {
    margin-left: 12px; /* push the body out to make room for point */
    padding: 8px 10px;
    font: bold 11px Arial, Helvetica;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.75);
}

注意:以上代码已修改为不占用 border-radius 等的空间负载

HTML

<div id="email">
<input name="1" type="text" value="Enter your email address"/>
    <div class="notify-wrap x1">
        <div class="notify-point"></div>
        <div class="notify-body">
            You've entered an invalid email address.
        </div>
    </div>
</div>

注意:在 notify-wrap 上，我添加了类 x1 来定义特定的错误消息，以与 OP 的原始 javascript 格式保持一致。

Javascript (jQuery)

$('input').focus( function() {
    var num = $(this).attr('name');
    $('div.notify-wrap.x' + num).css('display','inline-block');
});