在表单中显示两个输入按钮

Question

关于我使用bootstrap创建的联系表单的问题，我来找你，请参阅下面的jsfiddle以获取我的代码的副本...

我的问题是我提交和清除的两个按钮由于某种原因显示在彼此之上，而不是彼此相邻的内联...

我使用CSS将表单内容格式化为表格行，列和单元格所有联系人标签都在一列中，并在另一个中形成字段（如果我的CSS编码正确，则为并且我已经将表单放在一个带有引导类col-md-6的div中，这只会给它50％的页面宽度......

无论如何，就像我提到我的问题是两个按钮显示在标签下的表格的第一列下面，我猜这不会给它足够的空间，因此两个按钮堆叠在一起我的问题我将如何通过使用表格的整个宽度而不是列的宽度来显示彼此相邻的两个按钮？

以下是我的jsfiddle的链接：https://jsfiddle.net/neenus/nofuvqod/3/

＆＃13;

＆＃13;

#jumbotron-form {
  display: block;
  opacity: 0.90;
}

form {
  text-align: left;
  display: table;
  border-spacing: 0.25em;
}

.form-group {
  display: table-row;
}

label {
  display: table-cell;
  vertical-align: top;
}

input {
  display: inline;
}

textarea {
  width: 100%;
}

＆＃13;

<div class="jumbotron" id="jumbotron-form">
  <div class="col-md-6">
    <form action="SUBMIT">
      <div class="form-group">
        <label for="name">Name: </label>
        <input type="text" name="name" id="name" placeholder="enter your name" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="tel">Telephone: </label>
        <input type="tel" name="tel" pattern="Telephone" id="tel" placeholder="(999) 999-9999" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="email">e-Mail: </label>
        <input type="email" name="email" id="email" placeholder="name@email.ca" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="usrmsg">Message: </label>
        <textarea name="message" id="usrmsg" cols="50" rows="5" placeholder="enter your message here..."></textarea>
      </div>
      <div>
        <input type="submit" value="Submit" id="submit">
        <input type="reset" value="Clear">
      </div>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用flex-box，在这里我更新了您的代码，请查看代码段并fiddle

＆＃13;

＆＃13;

#jumbotron-form {
  display: block;
  background-size: cover;
  opacity: 0.90;
}

form {
  text-align: left;
  display: table;
  border-spacing: 0.25em;
}

.form-group {
  display: table-row;
}

label {
  display: table-cell;
  vertical-align: top;
}

input {
  display: inline;
}

textarea {
  width: 100%;
}

.submit {
  display: flex;
}

.submit input {
  margin-right: 20px;
}

＆＃13;

<div class="jumbotron" id="jumbotron-form">
  <div class="col-md-6">
    <form action="SUBMIT">
      <div class="form-group">
        <label for="name">Name: </label>
        <input type="text" name="name" id="name" placeholder="enter your name" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="tel">Telephone: </label>
        <input type="tel" name="tel" pattern="Telephone" id="tel" placeholder="(999) 999-9999" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="email">e-Mail: </label>
        <input type="email" name="email" id="email" placeholder="email@domain.com" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="usrmsg">Message: </label>
        <textarea name="message" id="usrmsg" cols="50" rows="5" placeholder="enter your message here..."></textarea>
      </div>
      <div class="submit">
        <input type="submit" value="Submit" id="submit">
        <input type="reset" value="Clear">
      </div>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是因为您在display: table中使用了<form>。我通过为所有<div>元素添加另一个.form-group包装来修改您的标记和CSS。

结帐：https://jsfiddle.net/nofuvqod/5/

段：

#jumbotron-form {
  display: block;
  background-size: cover;
  opacity: 0.90;
}

form {
  text-align: left;
  border-spacing: 0.25em;
}

.form-table{
  display: table;
}

.form-group {
  display: table-row;
}

label {
  display: table-cell;
  vertical-align: top;
}

input {
  display: inline;
}

textarea {
  width: 100%;
}

<强> HTML

<div class="jumbotron" id="jumbotron-form">
  <div class="col-md-6">
    <form action="SUBMIT">
      <div class="form-table">
        <div class="form-group">
          <label for="name">Name: </label>
          <input type="text" name="name" id="name" placeholder="enter your name" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="tel">Telephone: </label>
          <input type="tel" name="tel" pattern="Telephone" id="tel" placeholder="(999) 999-9999" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="email">e-Mail: </label>
          <input type="email" name="email" id="email" placeholder="email@domain.com" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="usrmsg">Message: </label>
          <textarea name="message" id="usrmsg" cols="50" rows="5" placeholder="enter your message here..."></textarea>
        </div>
      </div>

      <div>
        <input type="submit" value="Submit" id="submit">
        <input type="reset" value="Clear">
      </div>
    </form>
  </div>
</div>

Answer 3

这是HTML5＆amp;代码的Bootstrap标记....

＆＃13;

＆＃13;

/***********************************************************************************************/


/* Input Field   */


/***********************************************************************************************/

input[type="text"],
input[type="name"],
input[type="phone"],
input[type="email"],
textarea {
  border: none;
  padding: 8px;
  border-radius: 3px;
  width:100%;
  color: #454545;
  font-size: 16px;
  font-style: normal;
  background-color: #F5F5F5;
}

input[type="text"]:hover:focus,
input[type="name"]:hover:focus,
input[type="phone"]:hover:focus,
input[type="email"]:hover:focus,
textarea:hover:focus {
  padding: 8px;
  border-radius: 3px;
  min-width: 280px;
  font-style: normal;
  background: #F5F5F5;
}


/***********************************************************************************************/


/* Button & Reset  */


/***********************************************************************************************/

input[type="submit"],
input[type="reset"],
button {
  font-size: 16px;
  font-weight: 300;
  border: none;
  padding: 10px 30px;
  color: #ffffff;
  border-radius: 2px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
  background-color: #2FB7D5;
  /* layer fill content */
  -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  /* inner shadow */
  -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  /* inner shadow */
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  /* inner shadow */
}

input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  font-size: 16px;
  font-weight: 300;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
  background-color: #2FB7D5;
  /* layer fill content */
  -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  /* inner shadow */
  -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  /* inner shadow */
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  /* inner shadow */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ================================================
		 	Contact Form Start
	================================================= -->

	<section class="contact-form">
		<div class="container">
			<div class="row">
				<div class="col-lg-6 col-lg-offset-3">
					<form action="" method="post" name="form" id="form">
						<p>
							<label for="name">Name</label>
							<input type="text" name="" id="name" placeholder="Name" required>
						</p>
						
						<p>
							<label for="email">Email</label>
							<input type="email" name="email" id="email" placeholder="Email" required>
						</p>

						<p>
							<label for="message">Message</label>
							<textarea name="" id="message" cols="40" rows="5" placeholder="Write here..." required></textarea>
						</p>

						<input type="submit" value="Send">
						<input type="reset" value="Write Again">
					</form>
				</div>
			</div>
		</div>
	</section>
	

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用form-group类的按钮容器。

<div class="form-group">
  <input type="submit" value="Submit" id="submit">
  <input type="reset" value="Clear">
</div>