HTML文本输入字段与同一类中的其他字段的宽度不同(HTML Text input field different width to others in the same class)

对不起，如果标题不清楚，我想不出一个较短的方式陈述它而不带走太多。

现在，我已经制作了一个简单的联系表格（目前没有提交等），有4个标签和4个文字输入。每对都包含在它自己的div中，然后按类设置。

除了第4个div之外，所有东西都排成一行并且是我想要的地方。文本字段比其余字段宽一个像素，这也会使标签不对齐。

这就是我得到的......

HTML：

<div id="contact-form"> <div id="form-title"> <h3>Contact Form</h3> <h5>Enter your details below to contact me</h5> </div> <form id="contact"> <div class="input"> <label>First name: <input class="txt-box" type="text" /> </label> </div> <div class="input"> As above, "Surname" </div> <div class="input"> As above, "Phone" </div> <div class="input"> As above, "Email" </div> </form> </div>

CSS：

.input { width:100%; display:inline-block; } .input label { display:inline-block; vertical-align:left; text-align:right; padding:0; } .input input { width:60%; margin:0 5px 0 3px; display:inline-block; vertical-align:right; }

这是它的显示方式

Title... First name: [text] Surname: [text] Phone: [text] Email: [text ]

我已经浏览了所有其他代码，根本没有什么应该与这个部分进行交互。

任何想法将不胜感激，也请注意我已经搜索和尝试和测试，所以它的风格可能不是最好的或最有效的。

编辑：这是该部分的完整代码。

HTML：

<div id="contact-form"> <div id="form-title"> <h3>Contact Form</h3> <h5>Enter your details below to contact me.</h5> </div> <form id="contact"> <div class="input"> <label>First name <input class="txt-box" type="text" placeholder="John" /> </label> </div> <div class="input"> <label>Surname: <input class="txt-box" type="text" placeholder="Smith /> </label> </div> <div class="input"> <label>Phone <input class="txt-box" type="text" placeholder="0412345678" /> </label> </div> <div class="input"> <label>Email <input class="txt-box" type="text" placeholder="j.smith@example.com" /> </label> </div> </form> </div>

Sorry if the title isn't clear, I couldn't think of a shorter way of stating it without taking away to much.

Now, I have made a simple contact form (currently doesn't submit etc) with 4 labels and 4 text inputs. Each pair is contained inside it's own div and then styled by class.

Everything lines up and is where I want it, except the 4th div is off. The text field is one pixel wider than the rest, which also bumps the label out of alignment.

Here's what I've got...

HTML:

<div id="contact-form"> <div id="form-title"> <h3>Contact Form</h3> <h5>Enter your details below to contact me</h5> </div> <form id="contact"> <div class="input"> <label>First name: <input class="txt-box" type="text" /> </label> </div> <div class="input"> As above, "Surname" </div> <div class="input"> As above, "Phone" </div> <div class="input"> As above, "Email" </div> </form> </div>

CSS:

.input { width:100%; display:inline-block; } .input label { display:inline-block; vertical-align:left; text-align:right; padding:0; } .input input { width:60%; margin:0 5px 0 3px; display:inline-block; vertical-align:right; }

Here's how it displays

Title... First name: [text] Surname: [text] Phone: [text] Email: [text ]

I've been through all the other code and nothing should be interacting with this section at all.

Any ideas would be greatly appreciated, also please note that I've searched and tried and tested so the way that it's styled may not be the best or most efficient.

EDIT: Here's the full code of the section.

HTML:

<div id="contact-form"> <div id="form-title"> <h3>Contact Form</h3> <h5>Enter your details below to contact me.</h5> </div> <form id="contact"> <div class="input"> <label>First name <input class="txt-box" type="text" placeholder="John" /> </label> </div> <div class="input"> <label>Surname: <input class="txt-box" type="text" placeholder="Smith /> </label> </div> <div class="input"> <label>Phone <input class="txt-box" type="text" placeholder="0412345678" /> </label> </div> <div class="input"> <label>Email <input class="txt-box" type="text" placeholder="j.smith@example.com" /> </label> </div> </form> </div>

最满意答案

试试这个css

.input {
    width:100%;
    display:inline-block;
}

.input label {
    display:inline-block;
    vertical-align:left;
    text-align:right;
    padding:0;
    width:45%;
}

.input input {
    width:55%;
    margin:0 5px 0 3px;
    display:inline-block;
    vertical-align:left;
} 
  <div id="contact-form">
  <div id="form-title">
    <h3>Contact Form</h3>
    <h5>Enter your details below to contact me.</h5>
  </div>

  <form id="contact">
    <div class="input">
      <label>First name:
        <input class="txt-box" type="text" placeholder="John" />
      </label>
    </div>

    <div class="input">
      <label>Surname:
        <input class="txt-box" type="text" placeholder="Smith" />
      </label>
    </div>

    <div class="input">
      <label>Phone:
        <input class="txt-box" type="text" placeholder="0412345678" />
      </label>
    </div>

    <div class="input">
      <label>Email:
        <input class="txt-box" type="text" placeholder="j.smith@example.com" />
      </label>
    </div>
  </form>
</div> 
  
 
 
 jsfiddle输出 
Through trial and error I have found a way to make it work properly.  
Here's the updated html: 
<div id="contact-form">
  <div id="form-title">
    <h3>Contact Form</h3>
    <h5>Enter your details below to contact me.</h5>
  </div>

  <form id="contact">
    <div class="input">
      <label>First name:</label>
      <input class="txt-box" type="text" placeholder="John" />
    </div>

    <div class="input">
      <label>Surname:</label>
      <input class="txt-box" type="text" placeholder="Smith" />
    </div>

    <div class="input">
      <label>Phone:</label>
        <input class="txt-box" type="text" placeholder="0412345678" />
    </div>

    <div class="input">
      <label>Email:</label>
      <input class="txt-box" type="text" placeholder="j.smith@example.com" />
    </div>
  </form>
</div>
 
And the update css: 
.input {
width:100%;
}

.input label {
    width:35%;
    display:inline-block;
    vertical-align:left;
    text-align:right;
    padding:0;
    padding-top:5px;
}

.txt-box {
    width:50%;
    margin:0;
    margin-left:3px;
    display:inline-block;
    vertical-align:right;
}

更多推荐