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

显示：none时显示div内容

1 个答案: