Блог

Главная - Вопросы по программированию - Как центрировать контактную форму и размещать определенные входные данные в определенных строках

Как центрировать контактную форму и размещать определенные входные данные в определенных строках

#html #css

#HTML #css

Вопрос:

У меня есть базовая контактная форма, но когда я пытаюсь настроить ее с помощью css, она не настраивается, так как я хочу, чтобы форма была посередине, и я хочу, чтобы имя, адрес электронной почты и возраст были в верхней строке, а тема и выберите категорию в строке раздела, с большим текстовым полем в последней строке и кнопкой внизу, но форма по какой-то причине не настраивается. Я сделал что-то не так?

Я пробовал нуминозные входные данные css, такие как float, выравнивание текста, margin-left, padding-left и даже display. Я поискал в Интернете учебное пособие и даже попробовал учебное пособие, но по-прежнему ничего.

Мой 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">amp;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=amp;quot;form-group col-xxs-12amp;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, но я перепробовал в основном все, что смог придумать.

Ответ №1:

Помните о порядке файлов и библиотек, которые вы импортировали, любых библиотеках css, js или jquery, они имеют тенденцию перезаписывать ваш код.

свяжите свой css-файл в конце тега head после всех файлов.

поместите ваш js-файл в нижней части файла после всех импортированных вами файлов.

Ответ №2:

Я просто обновляю ваш код, внося несколько изменений в 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=amp;quot;form-group col-xxs-12amp;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>

Ответ №3:

Попробуйте следующий код:

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

Ответ №4:

предполагая, что остальная часть страницы действительна, и вы закрыли все эти разделы, я не уверен, но, возможно, дайте тегу формы идентификатор для его оформления? 

 <form id="mouthoff.form">

Комментарии:

1. и если я закрою div непосредственно перед формой, то форма не окажется в модальном :/

2. да, я не имел в виду до стилизации.. посмотрите, где они закрыты в ответе Хассана. пожалуйста, обновите свой вопрос любыми новыми выводами и добро пожаловать в stackoverflow!