Question

我在将CSS类附加到HTML div时遇到问题。我尝试了很多方法，但没有一种方法可行。

奇怪的是div中的按钮有id =＆＃34;按钮＆＃34;使用CSS样式移动到中心但是id =＆＃34; div＆＃34;在里面它没有。如何通过按钮将问题div置于中间？

HTML

<body>
<script>
        window.fbAsyncInit = function() {
            FB.init({
            appId      : 'xxxxxxxxxxx',
            cookie     : true,
            xfbml      : true,
            version    : 'v2.8'
        });

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });   
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function statusChangeCallback(response){
        if(response.status === 'connected'){
            console.log('Logged in and authenticated');
            setElements(true);
        } else {
            console.log('Not authenticated');
            setElements(false);
        }
    }

    function checkLoginState() {
        FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
        });
    }

    function setElements(isLoggedIn) {
        if (isLoggedIn) {
            document.getElementById('logout').style.display = 'block';
            document.getElementById('profile').style.display = 'block';
            document.getElementById('fb-btn').style.display = 'none';
            document.getElementById('heading').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
        } else {
            document.getElementById('logout').style.display = 'none';
            document.getElementById('profile').style.display = 'none';
            document.getElementById('fb-btn').style.display = 'block';
            document.getElementById('heading').style.display = 'block';
            document.getElementById('buttons').style.display = 'none';
        }
    }

    function logout() {
        FB.logout(function(response) {
            setElements(false);
        });
    }
</script>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Relvaeksam</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a id="logout" href="#" onclick="logout()">Logi välja</a></li>
            <fb:login-button
            id="fb-btn"
            scope="public_profile,email,user_birthday,user_location,user_posts"
            onlogin="checkLoginState();">
            </fb:login-button>
        </ul>
    </div>
</nav>

<div class="container">
    <h3 id="heading">Logige sisse, et alustada testimist</h3>
    <div id="profile">

    </div>
</div>

<div id="buttons">
    <button class="button starter" style="background-color: #4CAF50;" onClick="startQuiz()">Alusta testimist</button>
    <div id="questions"></div>
    <button class="button ender" type="button" onclick="checkAnswers()">Valmis</button>
    <div id="result"></div>
</div>
</body>`

CSS

#buttons {
    margin-top: 40px;
    margin-left: center;
    text-align: center;
    margin-bottom: 40px;
}

.button {
    background-color: #F6F4F4;
}

.button.ender {
    color: black;
    height: 30px;
    width: 150px;
    margin-top: 10px;
        border: 2px solid #4CAF50;
}

.button.starter {
    height: 30px;
    width: 150px;
    margin-top: 10px;
        color: black; 
        border: 2px solid #008CBA;
}

Answer 1

我调查了你的jsfiddle并看到你的div带有“问题”id是空的。然后我在里面添加了一些内容，看看它是否居中，当我添加时，它确实没有居中。

这就是为什么：首先，你在“按钮”div中应用了左边距：

#buttons {
    margin-top: 40px;
    margin-left: center;
    text-align: center;
    margin-bottom: 40px;
}

然后，您在“问题”中应用了另一个边距：

#questions {
    margin-top: 10px;
    margin-left: 100px;
    text-align: center;
}

在CSS中，另一个div中的div继承了它的“父亲”行为，因此，“问题”div不需要另一个左边距，因为它的父亲，“按钮”div已经拥有它。

以下是具有固定版本的JSFiddle。

你可以在CSS中看到我从子div中删除了margin-left，“questions”div。

希望我的答案涵盖你所有的问题。

CSS类不适用于html

1 个答案: