如何格式化文本框样式

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>