html-如何将联系表单居中并在某些行上放置某些输入

前端之家收集整理的这篇文章主要介绍了html-如何将联系表单居中并在某些行上放置某些输入 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个基本的联系表单,但是当我尝试使用css对其进行自定义时,它将无法自定义,因为我希望将表单放在中间,并希望我的姓名,电子邮件和地址;在第一行的年龄和主题上选择年龄,并在节的行中选择类别,在最后一行显示大文本框,在底部选择按钮,但是由于某种原因,表单无法自定义.我做错了什么吗?

我尝试了无数的css输入,例如float,文本对齐,左空白,左空白甚至显示.我已经在互联网上搜索并寻找了教程,甚至尝试了该教程,但仍然一无所获.

我的HTM代码是:

<li><button id="mouthoff-button">Mouthoff</button><div id="mouthoff-modal" class="mouthoff-modal"><div class="mouthoff-modal-content"><div class="mouthoff-modal-header"><span class="mouthoff-close">&times;</span></div><div class="mouthoff-modal-body"><h3>MOUTHOFF - TELL US WHAT'S ON YOUR MIND</h3>
                    <p>Have something you want to tell us,ask us or bring to our attention? Feel free to Mouthoff and let us know here. Please bear in mind that we may not be able to answer absolutely everything and we won't reveal to you any game info that hasn't yet been announced,but we're always happy to have a look at what you have to say.<br><p>If you have a technical issue that you'd like to report,<a href="#">please contact our Support Team</a>.</p>
                    <form>
                      <input type="text" name="name" placeholder="Name">
                      <input type="email" name="email" placeholder="Email">
                      <input type="number" name="age" placeholder="Age" min="13" max="100">
                      <input type="text" name="subject" placeholder="Subject">
                      <select name="category_id" required="required" id="category-id">
                        <option value="">Select Category</option>
                        <option value="1">General Suggestions</option>
                      </select>
                      <textarea name="body" class="form-control" rows="4" placeholder="Talk To Us" templates="<div class=&quot;form-group col-xxs-12&quot;></div>" oninvalid="setCustomValidity('You need to provide content')" oninput="setCustomValidity('')" maxlength="5000" required="required"></textarea>
                      <button class="btn btn-yellow" type="submit">SUBMIT</button>
                    </form>

我的CSS是

.mouthoff-modal-body input[type=text],input[type=email] {
  float: right;
  margin-left: 150px;
  padding-left: 25px;
  display: inline-block;
}

我知道他们不是很多CSS,但是我尝试了几乎所有我能想到的东西.

最佳答案
注意导入的文件和库,任何css或js或jquery库的顺序,它们倾向于覆盖您的代码.

 在所有文件之后的head标签末尾链接您的css文件.

 导入所有文件后,将js文件放在文件底部.

猜你在找的HTML相关文章