Question

我希望按钮的左侧与文本框齐平。如果这有所不同，我使用bootstrap 3。这是我的表单的HTML代码。我可以添加我的CSS，如果这也是必要的。谢谢。

＆＃13;

h1 {
    	font-size:83px;
    }

    .btn-primary {
    	background: #ffffff;
    	border-color: #ffffff;
    	color: #f05324;
    }

    .btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
        background: #ffffff;
    	border-color: #ffffff;
    	color: #f05324;
    }

    .panel-default {
        border: none;
    }

    input[type="text"] { 
    	color:white !important;
    } 

    input[type="email"] { 
    	color:white !important;
    } 

    .model-content {
    	color:black !important;
    }

    .text-left {
      text-align: left;
    }

    .text-right {
      text-align: right;
    }

    .text-center {
      text-align: center;
    }

    .navbar-default {
        background-color: #000000;
    }

    body {
    	background: #f05324 !important; 
    	margin-bottom: 80px;
    	color: #ffffff;
    }

    .page-header, .panel-body, .panel, .panel-default, .col-lg-9, .row {
    	background: #f05324 !important; 
    }

    .form-control{
        background-color: #f05324;
        color: #000000;
    }

    hr {
    	border-color: #ffffff;
    	background-color: #ffffff;
    	color: #ffffff;
    }

    .link {
    	color: #ffffff;
    }

    .page-header {
    	margin-top: 0;
    }

    .panel-body {
    	padding-top: 0;
    }

    .img-featured {
    	margin-top   : 15px;
    	margin-bottom: 15px;
    	margin-right : 15px;
    }

    .img-project{
    	margin-top   : 15px;
    	margin-bottom: 15px;
    }

    .show-onclick {
    	display: none;
    }

    .show-onclick1 {
    	display: none;
    }

    .block {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: // half the width of your img
    }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">NAME:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" name="name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">EMAIL:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="email" name="email">
    </div>
  </div>
  <div class="form-group">
    <label for="phoneNumber" class="col-sm-2 control-label">PHONE:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="phone" name="phone">
    </div>
  </div>

  <div class="form-group">
    <label for="major" class="col-sm-2 control-label">MAJOR:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="major" name="major">
    </div>
  </div>

  <hr>

  <div class="form-group">
    <label for="itemForSale" class="col-sm-2 control-label">ITEM FOR SALE:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="itemForSale1" name="itemForSale1">
    </div>
  </div>

  <div class="form-group">
    <label for="quantity" class="col-sm-2 control-label">QUANTITY:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="quantity1" name="quantity1">
    </div>
  </div>

  <div class="form-group">
    <label for="price1" class="col-sm-2 control-label">PRICE:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="price1" name="price1">
    </div>
  </div>

  <div class="form-group">
    <label for="itemOneImg1" class="col-sm-2 control-label">IMAGE 1:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg1">

    </div>
  </div>

  <div class="form-group">
    <label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">

    </div>
  </div>

  <input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
</form>

＆＃13;

Answer 1

如果您希望按钮的左边缘与文本框的左边缘匹配，则只需使用Bootstrap网格添加偏移量，如下所示：

<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
    ...
    <div class="form-group">
        <label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
        <div class="col-sm-10">
            <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
        </div>
    </div>

    <div class="form-group">
        <!-- Adjust col-sm-X for the buttons to adjust their positioning
             Could also add btn-block class to make the button span the column -->
        <div class="col-sm-offset-2 col-sm-9">
            <input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
        </div>
        <div class="col-sm-1">
            <input id="submit" type="button" value="Submit" class="btn btn-default">
        </div>
    </div>
</form>

更多细节（和另一个例子）可以在Bootstrap网站上找到：http://getbootstrap.com/css/#forms-horizontal

编辑：根据评论中的其他信息。

如何将此按钮与文本框对齐？

1 个答案: