如何格式化文本框风格

Question

我在我的网站上使用自举..除了自定义CSS风格为以下

.ff { // id of the form 
    font: 15px/1.6em Lato, serif; 
    max-width: 280px; 
    margin: 0 auto; 
    margin-top: 20px; 
    color: #767a7f; 
} 
.ff div { 
     position: relative; 
    } 
.ff span.glyphicon { 
     color: #adadad; 
    } 
    .ff input, 
    .ff button { 
     font-size: 16px; 
    } 
    .ff input, 
    .ff .input-group-addon { 
     border: #363b41; 
     background: white; 
     color: #767a7f; 
     border-bottom: 1px solid #292c34; 
     border-top: 1px solid #292c34; 
     border-left: 1px solid #292c34; 
     border-right: 1px solid #292c34; 

    } 

    .ex { 
    } 
    .ff .input-group-addon { 
     background: #363b41; 
     font-size: 20px; 
     color: #606468; 
    } 

    .ff > section { 
     text-align: center; 
     margin: 15px 0; 
    } 
     .ff > section span { 
      color: #767a7f; 
     } 


    input[type="submit"] { 
     background: #2A425A; 
     border: none; 
     text-shadow: 1px 1px 1px #2A425A; 
     font-size: 20px; 
     margin-top: 10px; 
     border-radius: 2px; 
    } 
    input[type="submit"]:hover { 
     background: #B19B72; 
    } 
    .ff input[type=text]:focus, 
    .ff input[type=password]:focus { 
     background: #e1e9f1; 
     border: none; 
     box-shadow: none; 
    } 

.form-group { 
    margin-top: 10px; 
    margin-bottom: 10px; 

} 
    .form-group input, 
    .form-group .input-group-addon { 
     border-radius: 2px; 
    } 

    .field-wrap { 
    position: relative; 
    margin-bottom: 40px; 
} 

.head { 
    margin-top:1%; 
    margin-left: 45%; 
} 

.main{ 
    position:relative; 
} 
      #wrapper { 
    margin-top: 120px; 
    margin-bottom: 120px; 

     } 

我怎么能分开的两个文本字段，并与他们之间的空间，让他们在线？另外，我想增加文本框的宽度

HTML

<div id="wrapper"> 

     <!-- Page Content --> 
    <div class="container" > 

     <!-- Page Heading/Breadcrumbs --> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="page-header">User Registration 

       </h1> 
       <ol class="breadcrumb"> 
        <li><a href="HomePageAdmin.aspx">Home</a> 
        </li> 
        <li class="active">Register</li> 
       </ol> 
      </div> 
     </div> 
     <!-- /.row --> 



     <!-----start-main----> 
      <div class="main"> 


     <form id="form1" class="ff" runat="server"> 


    <div class="field-wrap"> 
     <div class="form-group input-group"> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-tags"></span></span> 
     <input type="text" name="firstname" class="form-control input-lg" placeholder="First Name *" /> 

     <span class="input-group-addon" ><span class="glyphicon glyphicon-tags"></span></span> 
     <input type="text" name="lastname" class="form-control input-lg" placeholder="Last Name *" /> 
     </div> 
    </div> 

      <asp:Button ID="btn_LogIn" runat="server" Text="LogIn" class="btn btn-lg btn-block btn-success" /> 

     </form> 

       </div> 
     <!-----//end-main----> 

    </div> 
    </div> 

输出是这样的：

enter image description here

Answer 1

你想实现这样的事情

.ff { // id of the form 
 
    font: 15px/1.6em Lato, serif; 
 
    max-width: 380px; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
    color: #767a7f; 
 
} 
 
.ff div { 
 
     position: relative; 
 
    } 
 
.ff span.glyphicon { 
 
     color: #adadad; 
 
    } 
 
    .ff input, 
 
    .ff button { 
 
     font-size: 16px; 
 
    } 
 
    .ff input, 
 
    .ff .input-group-addon { 
 
     border: #363b41; 
 
     background: white; 
 
     color: #767a7f; 
 
     border-bottom: 1px solid #292c34; 
 
     border-top: 1px solid #292c34; 
 
     border-left: 1px solid #292c34; 
 
     border-right: 1px solid #292c34; 
 

 
    } 
 

 
    .ex { 
 
    } 
 
    .ff .input-group-addon { 
 
     background: #363b41; 
 
     font-size: 20px; 
 
     color: #606468; 
 
    } 
 

 
    .ff > section { 
 
     text-align: center; 
 
     margin: 15px 0; 
 
    } 
 
     .ff > section span { 
 
      color: #767a7f; 
 
     } 
 

 

 
    input[type="submit"] { 
 
     background: #2A425A; 
 
     border: none; 
 
     text-shadow: 1px 1px 1px #2A425A; 
 
     font-size: 20px; 
 
     margin-top: 10px; 
 
     border-radius: 2px; 
 
    } 
 
    input[type="submit"]:hover { 
 
     background: #B19B72; 
 
    } 
 
    .ff input[type=text]:focus, 
 
    .ff input[type=password]:focus { 
 
     background: #e1e9f1; 
 
     border: none; 
 
     box-shadow: none; 
 
    } 
 

 
.form-group { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 

 
} 
 
    .form-group input, 
 
    .form-group .input-group-addon { 
 
     border-radius: 2px; 
 
    } 
 

 
    .field-wrap { 
 
    position: relative; 
 
    margin-bottom: 40px; 
 
} 
 

 
.head { 
 
    margin-top:1%; 
 
    margin-left: 45%; 
 
} 
 

 
.main{ 
 
    position:relative; 
 
} 
 
      #wrapper { 
 
    margin-top: 120px; 
 
    margin-bottom: 120px; 
 

 
     }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="wrapper"> 
 

 
     <!-- Page Content --> 
 
    <div class="container" > 
 

 
     <!-- Page Heading/Breadcrumbs --> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <h1 class="page-header">User Registration 
 

 
       </h1> 
 
       <ol class="breadcrumb"> 
 
        <li><a href="HomePageAdmin.aspx">Home</a> 
 
        </li> 
 
        <li class="active">Register</li> 
 
       </ol> 
 
      </div> 
 
     </div> 
 
     <!-- /.row --> 
 

 

 

 
     <!-----start-main----> 
 
      <div class="main"> 
 

 

 
     <form id="form1" class="ff" runat="server"> 
 

 

 
    <div class="field-wrap"> 
 
     <div class="form-group"> 
 
     <div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"><span class="glyphicon glyphicon-tags"></span></span> 
 
     <input type="text" name="firstname" class="form-control input-lg" placeholder="First Name *" /> 
 
</div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon" ><span class="glyphicon glyphicon-tags"></span></span> 
 
     <input type="text" name="lastname" class="form-control input-lg" placeholder="Last Name *" /> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
      
 
      <asp:Button ID="btn_LogIn" runat="server" Text="LogIn" class="btn btn-lg btn-block btn-success" /> 
 

 
     </form> 
 

 
       </div> 
 
     <!-----//end-main----> 
 

 
    </div> 
 
    </div>