css - 在右上角添加登录

Question

我想在右上角添加登录名，就像大多数论坛一样。我在左/右拆分我的容器，但右侧不起作用。

    <div id="header">
        <div class="container">
        <div class="leftbox">
            LOGO image
            </div>
<div class="rightbox">
 <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>

        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

</div>

CSS

body {
    background-color: #E3E3E3;
    font-size: 12px;
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    color: #4f4f4f;
    font-family: "BebasNeue", sans-serif;
    margin: 0;
    font-weight: normal;
}

/* header/navbar*/

#header{
    background-color: #2C2C2C;
    color: #FFFFFF;
    padding-top: 30px;
}

#header.leftbox{
    float:left;
    display: inline;
}

#header.rightbox{
    float:right;
    display: inline;
    width: 200px;
}

这是我的 jsfiddle:https://jsfiddle.net/otj12jno/

Answer 1

你犯了一个错误。 css中id和class之间应该有一个空格。

#header.leftbox{}

此代码调用 id="header" 和 class="leftbox"

的元素

#header .leftbox{}

这段代码调用 class="leftbox" 和他的 parent (或祖 parent 等)有 id="header" 的元素