Question

我有一个按钮和一个旁边的链接，但是，当我尝试在它们之间添加填充时，链接进入下一行。我想保持按钮登录和链接以恢复彼此旁边的用户密码。但我希望他们之间有一点差距。

我创建了一个包含所有代码的小提琴。 https://jsfiddle.net/z6h1e3j4/

以下是我的简单登录表单的HTML。谢谢你给予的任何帮助。

<form class="form-signin" method="POST">
   <span id="reauth-email" class="reauth-email"></span>
   <label> <input type="text" name="username" id="username" class="form-control" placeholder="Username"></label>
   <label><input type="password" name="password" id="password" class="form-control" placeholder="Password" required></label>
   <div id="remember" class="checkbox">
      <label>
      <input type="checkbox" value="remember-me"> Remember me
      </label>
   </div>
   <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit">Sign in</button>
   <div class="link"> <a href="register4.php" id="underlining"> Forgot Password?
      </a>
   </div>
</form>

Answer 1

提及 的选项 https://jsfiddle.net/gx5a2bqq/

<button class="btn btn-lg btn-primary btn-block btn-signin" 
   type="submit" name="submit">Sign in</button>
&nbsp;&nbsp;
<div class="link"> 
  <a href="register4.php" id="underlining"> Forgot Password?
</a>

保证金选项：
https://jsfiddle.net/ra7y2joh/

.link {
    margin-bottom: 50px;    
    padding-top:5px;
    margin-left: 20px;
}

Answer 2

CSS边距属性最能解决您的问题。 margin属性用于在任何已定义边框之外的元素周围创建空间。

我在按钮上添加了10px的边距。

`

        <p id="profile-name" class="profile-name-card"></p>
        <form class="form-signin" method="POST">
            <span id="reauth-email" class="reauth-email"></span>
            <label> <input type="text" name="username" id="username" class="form-control" placeholder="Username"></label>
            <label><input type="password" name="password" id="password" class="form-control" placeholder="Password" required></label>
            <div id="remember" class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button style="margin-right: 10px" class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit">Sign in</button>
            <div class="link"> <a href="register4.php" id="underlining"> Forgot Password?
        </a></div> 
        </form><!-- /form -->

        <div class="forgot-password">
            Don't have an account? <a href="register4.php" id="underlining"> Create an account
        </a>
    </div><!-- /forgot-password -->

</div><!-- /card-container -->`

Answer 3

按钮和链接

width:45% 总宽度为90％。

并margin-left:10%进行关联，这使其达到100％。

以百分比形式使用width，以防止链接移至下一行。

html {
	 height: 100%;
}

body{
	height: 100%;
    background-image: linear-gradient(rgb(214, 229, 255), rgb(106, 144, 209));
	margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card-container.card {
    max-width: 350px;
    height:400px;
    padding: 0;
}
	


label, input {
    display: block;
}

label {
    margin-bottom: 30px;
}

input[type=checkbox] {
    display: inline;
}


/*
 * Card component
 */
.card {
    background-color: #a2b6de;
    /* just in case there no content*/
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 50px;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}


.btn-signin {
    display: block;
    width: 50%;
    font-weight: 700;
    font-size: 14px;
    height: 36px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: none;
    -o-transition: all 0.218s;
    -moz-transition: all 0.218s;
    -webkit-transition: all 0.218s;
    transition: all 0.218s;
    float:left;
    
}

.btn-signin-upload{
    display: block;
    width: 20%;
    font-weight: 700;
    font-size: 14px;
    height: 36px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: none;
    -o-transition: all 0.218s;
    -moz-transition: all 0.218s;
    -webkit-transition: all 0.218s;
    transition: all 0.218s;
    float:left;
    
}

.form-signin #inputEmail,
.form-signin #inputPassword {
    direction: ltr;
    height: 44px;
    font-size: 16px;
}

  .form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.form-signin .form-control:focus {
    border-color: rgb(104, 145, 162);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}


.link, .btn-signin {
    display: inline-block;
    width:45%;
}

.link {
    margin-bottom: 50px;    
    padding-top:5px;
    margin-left:10%;
}

.form-signin {
    padding: 40px;
}

.forgot-password {
  padding: 25px 40px;
}

.forgot-password {
    color: #fff;
	font-size:16px;
    background-color: #5967b9;
    height: 130px;
}

.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
    color: #edf4fd;
}

<div class="card card-container">
		<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
		<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert">  <?php echo $fmsg; ?> </div><?php } ?>
		
            <p id="profile-name" class="profile-name-card"></p>
            <form class="form-signin" method="POST">
                <span id="reauth-email" class="reauth-email"></span>
                <label> <input type="text" name="username" id="username" class="form-control" placeholder="Username"></label>
                <label><input type="password" name="password" id="password" class="form-control" placeholder="Password" required></label>
                <div id="remember" class="checkbox">
                    <label>
                        <input type="checkbox" value="remember-me"> Remember me
                    </label>
                </div>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit">Sign in</button>        
                <div class="link"> <a href="register4.php" id="underlining"> Forgot Password?
            </a></div> 
            </form><!-- /form -->
          
            <div class="forgot-password">
                Don't have an account? <a href="register4.php" id="underlining"> Create an account
            </a>
        </div><!-- /forgot-password -->
                
    </div><!-- /card-container -->

在链接和按钮之间创建空间

3 个答案: