註冊表格對齊到滑塊問題

Question

form{ 
 
    max-width: 30%; 
 
    background-color: white; 
 
    padding: 2%; 
 
    position: relative; 
 
    left: 50%; 
 
    color: black; 
 
    font-family: fantasy; 
 
} 
 

 
.form-control{ 
 
    padding: 2%; 
 
    margin: 1%; 
 
    
 
} 
 

 
label{ 
 
    border-radius: 4%; 
 
    margin: 1%; 
 
}

<div class="six columns"> 
 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    
 
<!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
<!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="img/create.svg" alt="create"> 
 
     <div class="carousel-caption"> 
 
     .... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="..." alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
    </div> 
 
    
 

 
<div class="six columns"> 
 
    
 
    <form method="post" action=""> 
 
    
 
    <label>Your Name:</label> 
 
    <input type="text" class="form-control"><br /> 
 
     
 
     <label>Your Email:</label> 
 
     <input type="email" class="form-control"><br /> 
 
    
 
    <label>Your Password:</label> 
 
    <input type="password" class="form-control"><br /> 
 
     
 
     <label><input type="checkbox">Male</label> 
 
     <label><input type="checkbox">Female</label> 
 
     <button class="signin">Sign In</button> 
 
    </form> 
 
    </div> 
 

在主頁上我試圖對齊滑塊和註冊表格的右邊。滑塊應位於左側，註冊表單位於右側。但是，當我編碼時，表格不會向上移動：position：relative;頂部2％;

需要幫助!!!

Answer 1

正如我在評論中所說，你應該使用float: left和width: 50%來做到這一點。

.six.columns { 
    float: left; 
    width: 50%; 
} 

JSFiddle