注册表单与滑块问题的右侧对齐

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>

在主页中，我试图对齐滑块和注册表单。滑块应位于左侧，注册表单应位于右侧。但是当我编码时 Form 并没有向上移动- position: relative;前 2%；

需要帮助！！！

Answer 1

正如我在评论中所说，您应该使用 float: left 和 width: 50% 来执行此操作。

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

JSFiddle

注册表单与滑块问题的右侧对齐

Signup form align to the right of the slider issue

html

css

slider