设置字段集填充时，文本字段比数字字段宽

Question

＆＃13;

＆＃13;

fieldset {
  width: 510px;
  border-width: 1px;
  border-color: black;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2em;
}

*:not(.menu)(fieldset) {
  margin: 1;
  padding: 1;
}

＆＃13;

<form>
  <fieldset>
    <legend style="font-weight: bold">
      Persoonsgegevens
    </legend>
    <table>
      <tr>
        <td class="td1"><label for="Voorletters">Voorletters</label></td>
        <td class="td2"><input name="Voorletters" type="" /></td>
      </tr>
      <tr>
        <td class="td1"><label for="Achternaam">Achternaam</label></td>
        <td class="td2"><input name="Achternaam" type="" /></td>
      </tr>
      <tr>
        <td class="td1"><label for="Huisnummer">Huisnummer</label></td>
        <td class="td2"><input name="Huisnummer" type="number" /></td>
        <tr>
          <tr>
            <td class="td1"><label for="Postcode">Postcode</label></td>
            <td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
          </tr>
    </table>
  </fieldset>
</form>

＆＃13;

＆＃13;

＆＃13;

我正在学习HTML / CSS并在表单上学习语法。 在表单中我有多个字段，如输入类型=＆＃34;文本＆＃34;输入类型=＆＃34;数字＆＃34;并输入=＆＃34; text＆＃34;与模式。

带图案字段的数字和文本的宽度小于常规文本字段的宽度。我已经对此进行了调查，并通过添加以下CSS代码解决了这个问题：

*:not(.menu){
    Margin: 1;
    padding: 0;     
}

这很好但是我使用了一个字段集，我希望用以下代码设置填充：

fieldset {
        width: 510px;
        border-width: 1px;
        border-color: black;
        padding-left:1em;
        padding-right: 1em;
        padding-bottom: 2em;
 }

除非我将以前的代码更改为：

，否则此代码无效

*:not(.menu)(fieldset)
    margin: 1;
    padding: 1;     
}

但是，带有模式和数字字段的文本字段不再与常规文本字段相同。

有人想知道如何解决这个问题吗？

Answer 1

您可以像这样设置css中所有输入字段的宽度：

fieldset {
    width: 510px;
    border-width: 1px;
    border-color: black;
    padding-left:1em;
    padding-right: 1em;
    padding-bottom: 2em;
 }
 
*:not(.menu)(fieldset){
    margin: 1;
    padding: 1;	
}

input {
  width:200px;  /*<------Set the width here as you desire*/
}

<form> 		
<fieldset>
<legend style="font-weight: bold"><h3>Persoonsgegevens</h3></legend>
<table>
  <tr>
    <td class="td1"><label for="Voorletters">Voorletters</lable></td>
    <td class="td2"><input name="Voorletters" type="" /></td>
  </tr>
  <tr>
    <td class="td1"><label for="Achternaam">Achternaam</lable></td>
    <td class="td2"><input name="Achternaam" type="" /></td>
  </tr>
  <tr>
    <td class="td1"><label for="Huisnummer">Huisnummer</lable></td>
    <td class="td2"><input name="Huisnummer" type="number" /></td>
  <tr>
  <tr>
    <td class="td1"><label for="Postcode">Postcode</lable></td>
    <td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
  </tr>
</table>
</fieldset>
</form>

我在这里拍了一张照片，告诉你他们都是一样的：