我有一个基本的联系表，但是当我尝试使用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">×</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="form-group col-xxs-12"></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，但是我已经尝试了很多我能想到的东西。
答案 0 :(得分：1)
请注意您导入的文件和库，任何CSS或js或jquery库的顺序，它们往往会覆盖您的代码。
在所有文件之后的head标记末尾链接您的css文件。
在导入所有文件之后，将js文件放在文件的底部。
答案 1 :(得分：1)
我只需很少的CSS更改即可更新您的代码。希望对您有帮助。谢谢
.mouthoff-modal-body {
margin: 0 auto;
width: 500px;
}
.mouthoff-modal-body input,
.mouthoff-modal-body select {
display: block;
margin-bottom: 10px;
width: 100%;
}
.mouthoff-modal-body textarea {
display: block;
resize: none;
margin-bottom: 10px;
width: 100%;
}<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">×</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><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="form-group col-xxs-12"></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>
</div></div></div>
答案 2 :(得分：0)
假设页面的其余部分是有效的，并且您已经关闭了所有我不确定的div，但也许给form标记一个id来为其设置样式吗？
<form id="mouthoff.form">
答案 3 :(得分：0)
尝试以下代码：
form {
text-align: center;
}
form * {
margin: 10px;
} <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">×</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"><br>
<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><br>
<textarea name="body" class="form-control" rows="4" placeholder="Talk To Us" templates="<div class="form-group col-xxs-12"></div>" oninvalid="setCustomValidity('You need to provide content')" oninput="setCustomValidity('')" maxlength="5000" required="required"></textarea><br>
<button class="btn btn-yellow" type="submit">SUBMIT</button>
</form>