保證金頂部/填充頂部沒有效果？

Question

我正在構建一個jQuery表單字段驗證器，目前我正在構建CSS中的彈出式通知。

問題是，無法應用margin-top/padding-top屬性，我無法獲得.notification-point以對齊到.notification-body的中心。

這裏有一個鏈接到我的jsfiddle：http://jsfiddle.net/Z6Jtd/8/

任何幫助/編輯將不勝感激！

Answer 1

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

你去那裏。

注：我改變了你的JavaScript一點。我刪除了.fadeOut;我強烈建議爲.focusout()創建一個函數 - 或者更好的辦法是，檢測值的變化，當它匹配所需的規則時，隱藏該消息。

---

對於未來的讀者：

的解決這個問題是在一個容器中與position: relative;上包裹兩個標記（「點」）和體（「消息」）它。

然後，我使用position: absolute;和top: 8px定位了標記。

接下來，我將margin-left: 12px添加到消息以便不重疊標記。

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'); 
});