Home>

I am practicing to make inquiry forms with various types.

"Company name"-"Telephone number" has vertical character strings and "required" items.
Only the "trigger" part and the "inquiry content" part
Even if you style with CSS of the same class name, it will not be aligned.

What is the cause?

As advised in the same case as last time
.container>div: nth-child (1) {
width: 15%;
min-width: 10em;
}

I'm trying to ...

Also the "trigger" part and the "inquiry content" part
I intend to code under the same conditions
I am in trouble with the cause.
Please give me some advice.

<body>
    <form action = "" method = "POST">

       Inquiry form contents 
    
      
      <label for = "i_company">
        Company name</label>
      
      
      <em>Required</em>
      
      
      <input type = "text" name = "company" required>
      
    

  
  <label for = "i_name">
      Your name</label>
  
    
    <em>Required</em>
    
    
    <input type = "text" name = "name" required>
    


  
  <label for = "i_mailadrees">
      Email address</label>
  
  
  <em>Required</em>
  
  
<input type = "text" name = "mailadrees" required>
  


  
  <label for = "i_telnumber">
      Phone number</label>
  
  
  <em>Required</em>
  
  
  <input type = "text" name = "telnumber" required>
  


  
  <label>
    Trigger
</label>
  
  
  <em>Optional</em>
  
  
    
    <input type = "checkbox">
    <label for = "check01_01">Flyer</label>
    
    
    <input type = "checkbox">
    <label for = "check01_02">Advertising</label>
    
    
    <input type = "checkbox">
    <label for = "check01_03">SNS</label>
    
    
    <input type = "checkbox">
    <label for = "check01_04">DM</label>
    
  

  <!-Inquiry content mast->
    
      
      <label>
          Content of inquiry
      </label>
      
      
      <em>Required</em>
      
      
      <textarea required></textarea>
      
    
</form>
.container {
    border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container label {
    width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
    font-size: 18px;
}
.container input {
    border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
    padding-right: 6em;
    padding-bottom: 30px;
  height: 30px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: # eaedf2;
  font-size: 18px;
}
.container textarea {
        border: 1px solid #ddd;
        border-radius: 6px;
        margin-left: 40px;
        padding-left: 1em;
        padding-right: 6em;
        height: 216px;
        flex: 1;
        width: 100%;
        max-width: 410px;
        background: # eaedf2;
        font-size: 18px;
    }
.container>div: nth-child (1) {
    width: 15%;
    min-width: 10em;
}
  • Answer # 1

    I think it's as expected, but ...
    All three are centered together
    Probably because the width of the third div element changes depending on the contents

  • Answer # 2

    Since the width of the small element of flex changes according to its contents,
    To unify it (that is, unify the width of the first column of all rows)
    widthTo specify
    That was the speculation of the previous advice.

    In the previous case, the width was uneven only in the first row, but
    This time, the third row is also uneven, so there toowidthI think it's good to clarify.

    .container>div: nth-child (1) {
        width: 15%;
        min-width: 10em;
    }
    .container>div: nth-child (3) {
        width: 60%;
        min-width: 450px;
    }