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文件放在文件底部.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...