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"及其父（或祖父母等）拥有id="header"

的元素

Answer 2

在按钮类上使用position: absolute可能更容易，然后按如下方式设置位置：

#signinbtnClass {
 position : absolute;
 top : 0 px  // or below the header or banner image
 left :10px;
}

添加登录到右上角

2 个答案: