html - 如何将联系表居中并在某些行上输入某些内容

Question

我有一个基本的联系表格，但是当我尝试用 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 不多，但我已经尝试了几乎所有我能想到的东西。

Answer 1

注意您导入的文件和库的顺序，任何 css 或 js 或 jquery 库，它们往往会覆盖您的代码。

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

在导入所有文件后，将您的 js 文件放在文件底部。