2017-10-11 128 views
0

我来给你关于我与我创建使用引导见下文我的代码副本的的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>

+0

刚刚发布了您的查询回答,让我知道是否需要进一步的更改。 –

+0

谢谢Anmol我没有想到Flex非常感谢 – Neenus

回答

0

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

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

谢谢Muthu我用这个来解决我的问题......感谢您的帮助 – Neenus

0

可以使用柔性盒为此,我在这里更新您的代码,请检查片段和fiddle

#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; 
 
}
<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 class="submit"> 
 
     <input type="submit" value="Submit" id="submit"> 
 
     <input type="reset" value="Clear"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

0

这里是HTML5 &引导标记为您的代码....

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

 

 
/* 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 */ 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- ================================================ 
 
\t \t \t Contact Form Start 
 
\t ================================================= --> 
 

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

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

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

+0

这是我的[GitHub](https:// github。com/momin-ctg)这个联系表格的存储库 – Momin

+0

Momin非常感谢您的联系方式,我真的很喜欢它,但我为朋友构建了这个免费的静态简单网站,她以另一种方式喜欢它;否则我会退出 – Neenus

+0

谢谢@Neenus。您可以根据需要和HTML5标记更改引导程序网格,此外,CSS3样式是现代化的跨浏览器兼容。 – Momin

0

使用按钮容器form-group类。

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

谢谢Miraz,但这并没有解决我的问题... – Neenus