CSS-стиль HTML5 выберите, введите - PullRequest
Новая
       21

CSS-стиль HTML5 выберите, введите

0 голосов
/ 13 января 2019

Я довольно новичок в вебе. Я работаю над сайтом, используя новые теги HTML5, и у меня возникают проблемы с однородностью между всеми полями ввода.

Вот фрагмент кода HTML. 

/*======== Styling for the article section */

article {
  font: 10pt Arial, Helvetica, Sans-Serif;
  padding: 5px;
  /* Left margin should match neighboring column full width */
}


/*Form overall section*/

form {
  margin: 5px 5px;
  font-size: 30px;
  clear: left;
}


/*Form text box sections*/

input,
select {
  display: block;
  padding: 5px 5px;
  margin: 10px 0px;
  font-size: 30px;
  border: 1px solid black;
  height: 70px;
}
<article>
  <form action="/action_page.php">
    <div>
      <div>
        Payed to:<br>
        <input type="text" name="Payed to" value="Jim's Foodliner">
      </div>

      <div>
        <br> Amount:
        <br>
        <input type="number" name="Amount" value="1">
      </div>

      <div>
        <br>Date:<br>
        <input type="date" name="date">
      </div>

      <div>
        <br>Time:<br>
        <input type="time" name="time">
      </div>

      <div>
        <br>Category<br>
        <div>
          <select name="Category">
            <option value="Option1">Option1</option>
            <option value="Option2">Option2</option>
            <option value="Option3">Option3</option>
            <option value="Option4">Option4</option>
          </select>
        </div>
      </div>

      <div>
        <br><br>Billable
        <input type="checkbox" name="Billable" value="Billable">
      </div>

      <div>
        <br><br>
        <input type="submit" value="Submit">
      </div>
    </div>
  </form>

</article>

Вот скриншот с результатом, где вы можете видеть, что поля имеют различную высоту . Это в Google Chrome, кстати. Скриншот GoogleChrome

Я просто пытаюсь добиться единообразия среди содержимого коробки высота . Заполнение и поля - все то же самое только не внутреннее содержание. Я довольно новичок в css, так что любые веб-ссылки или учебные пособия, которые более подробно рассказывают о новых тегах html5, будут великолепны. Спасибо!

Вот еще 2 снимка экрана, чтобы объяснить разницу между высотами блоков с помощью инструментов разработчика Chrome. На этом рисунке показана высота поля даты в инструментах разработчика. На этом рисунке показана высота поля «Выбор / категория» в инструментах разработчика

Ответы [ 3 ]

0 голосов
/ 13 января 2019

Добавьте ширину: 100% к вашему CSS-коду или она может быть в процентах, см или px

Вы можете выбрать размер ширины в зависимости от ваших требований. Если вы новичок в этом, вы можете попробовать форму начальной загрузки, которая также привлекательна и отзывчива в мобильном представлении. Узнайте больше на: https://www.w3schools.com/bootstrap/bootstrap_forms.asp

0 голосов
/ 14 января 2019

Я думаю, что наконец нашел свой ответ на этом сайте. Спасибо всем! https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

0 голосов
/ 13 января 2019

использовать пропущенные width:100% на входе и выбрать тег 

article,form  {
 display:block;
}
input,
select {
 width:100%;
}
...