我来给你关于我与我创建使用引导见下文我的代码副本的的jsfiddle一个接触的形式有一个问题输入按钮...显示两个形式
我的问题是我提交和清除的两个按钮由于某种原因彼此显示,而不是内联彼此相邻...
我使用CSS将表格内容格式化为表格行,列和单元格所有联系人标签都在一列中,并在另一个中表格字段(这是如果我得到我的CSS编码正确),我已经把表格放在一个引导类的div只给它50%的页面宽度...
无论如何,就像我提到的,我的问题是两个按钮都显示在标签下的表格的第一列,我猜并没有给它足够的空间和作为结果两个按钮堆叠在彼此的顶部我的问题是我将如何去显示两个按钮相邻的使用表格的全宽而不是列的宽度?
这里是我的jsfiddle链接:https://jsfiddle.net/neenus/nofuvqod/3/
#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%;
}
<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 protected]" 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>
刚刚发布了您的查询回答,让我知道是否需要进一步的更改。 –
谢谢Anmol我没有想到Flex非常感谢 – Neenus