logo标签列表

如何将联系表单居中并将特定输入放在特定行上

htmlcss
3
我有一个基本的联系表格，但当我试图用CSS自定义它时，它不会自定义，因为我希望表格居中，并且希望姓名，电子邮件和年龄在第一行，主题和选择类别在第二行，大文本框在最后一行，按钮在底部，但是表格由于某种原因无法自定义。 我做错了什么吗？
我尝试过使用float、text-align、margin-left、padding-left和display等多种CSS方法进行调整。我搜索了互联网并寻找了教程，甚至尝试了教程，但依然没有效果。
我的HTML代码如下：
<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，但我已经尝试了我所能想到的大部分方法。

4个回答
0

注意导入文件和库的顺序，任何css、js或jquery库都可能覆盖您的代码。

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

将您的js文件放置在所有已导入文件的底部。

0

我刚刚更新了你的代码，做了一些 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=&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>
    
  
</div></div></div>

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">&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"><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=&quot;form-group col-xxs-12&quot;></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>

0
假设页面的其余部分是有效的，并且您已经关闭了所有那些div，但也许给表单标签一个ID以进行样式设置？
<form id="mouthoff.form">
如果我在表单之前关闭 div，那么表单就不会出现在模态窗口中 :/ - user10786836
是的，我不是指样式之前的问题。请看哈桑的回答中它们被关闭的位置。请更新您的问题并欢迎来到StackOverflow！ - ocæon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接