Question

我刚接触网络。我正在使用新的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>

以下是结果的屏幕截图，您可以看到这些框是不同的高度。它在谷歌浏览器中。 GoogleChrome screenshot

我只是想使框内容高度之间保持一致。填充和边距都相同，只是内部内容不同。我在CSS方面还很陌生，因此任何对新html5标签进行更详细介绍的Web链接或教程都很棒。谢谢！

这里还有2张屏幕截图，用于说明使用chrome开发人员工具的盒子高度之间的差异。 This picture shows the height of the date field in the dev tools This picture shows the height of the Select/category field in dev tools

Answer 1

在输入中使用缺少的width:100%并选择标签

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

Answer 2

在您的CSS代码中添加宽度：100％，或者以百分比，厘米或像素为单位

您可以根据需要决定宽度尺寸。如果您不熟悉此功能，可以尝试在移动视图中也具有吸引力和响应能力的引导表单。有关更多信息，请访问：https://www.w3schools.com/bootstrap/bootstrap_forms.asp

Answer 3

我想我终于在此站点上找到了答案。谢谢大家！ https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

CSS样式HTML5选择，输入

3 个答案: