显示:none时显示div内容

Question

我有几个div,我只在某个动作后显示.就像验证消息一样.对于这个,在一个div中有几条消息,我希望它们相隔几个像素.我知道怎么做,但是当我更改css时,你可以看到内容的一部分而不点击提交按钮.

一切都没问题,除了我希望消息分开一些像素(填充顶部:5px或其他东西)但是当我这样做时你总是看到我添加的填充,甚至是display: none.

我的div:

<div id="fout"></div>
</div>

样式:

#fout
{
    display:none;
    margin-left:-75px;
    display:block;
    font-size:15px;
    background-color:#D73033;
    width:350px;
    font-family:"Myriad Pro";
    color:#FFFFFF;
    text-align:center;
    border-radius:2px;
}

这是我的jquery以防万一你需要它:

 $(function(){

        // initialisatie formulier validatie. (validate.min.js)
        var validator = new FormValidator('form', [{
            name: 'voornaam',
            display: 'Voornaam',    
            rules: 'required'
        }, {
            name: 'achternaam',
            display: 'achternaam', 
            rules: 'required'
        },{
            name: 'telefoonnummer',
            display: 'telefoon', 
            rules: 'required|numeric'
        },{
            name: 'email',
            display: 'email', 
            rules: 'required|valid_email'
        }], function(errors, event) {
            var berichten = document.getElementById('fout');
            $("#fout").css("display","none"); 
            $("#fout").fadeIn('slow').css;

            berichten.innerHTML = '';

            // als er fouten zijn:
            if (errors.length > 0) {
                for (var i = 0, l = errors.length; i < l; i++) {
                    berichten.innerHTML += errors[i].message + '<br>';
                }
            // als de validatie goed gegaan is:
            } else {
                var voornaam = $('#voornaam').val();
            var achternaam = $('#achternaam').val();
            var telefoonnummer = $('#telefoonnummer').val();
            var email = $('#email').val();

            $.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam,    telefoonnummer:telefoonnummer, email:email},function(res){
                $('#result').html(res);
            });
        $('#insert').remove();


        $("#formpje").hide('slow').css;
        document.getElementById('goed').innerHTML = 'Verstuurd!';
        }

        // voorkom ten allertijde dat het formulier daadwerkelijk ge-submit wordt!
        event.preventDefault();
    });
});

Answer 1

你已经设定:

    display:none;
    margin-left:-75px;
    display:block;

如此display:block;覆盖display:none;

去掉 display:block;

#fout
{
    display:none;  /* <-- 1st declaration */
    margin-left:-75px;
    display:block; /* <-- 2nd declaration which overwrites 1st declaration */
    font-size:15px;
    background-color:#D73033;
    width:350px;
    font-family:"Myriad Pro";
    color:#FFFFFF;
    text-align:center;
    border-radius:2px;
}

编辑

正如abhitalks的评论中提到的那样

这也是一个问题:

$("#fout").css("display","none"); $("#fout").fadeIn('slow').css;

编辑2

在线之间留出空间,给:

line-height:2em;在你#fout班上!!

demo here