Select inputs and text inputs in HTML - Best way to make equal width?

Question

I\'ve got a simple form like so (illustrative purposes only)...

   

      Name
               


        
                      

              相关标签:
       
      

Answer 1

The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

---

There's normalize.css project that aggregates such tricks.

Answer 2

padding will make the text be closer to the edge of the box.

try setting the margin to 0px, and if that seems right, play around with it (like just setting margin-left only)

Answer 3

Had same problems with 100% width table and cells, with a textbox (also with width at 100%) wider than the table cell.

This solved my problem in the css:

table td
{
    padding-right: 8px;
}

Not the best solution ever, cause you probably get some additional space to the right side. But at least it's not hiding anymore!