Html 显示表格单元格获得额外的不需要的宽度

这是我的HTML：

<form action="#" class="six columns push_two contact-form">
    <label>
        <span>Name</span>
        <input type="text" name="name" />
    </label>
    <label>
        <span>Email</span>
        <input type="email" name="email" />
    </label>
    <label>
        <span>Phone number</span>
        <input type="text" name="phone" />
    </label>
    <label>
        <span>Message</span>
        <textarea name="message"></textarea>
    </label>
    <input type="submit" name="submit" value="Send" />
</form>

结果我得到了下面的截图。我已经用红色边框标出了跨距。它们比我想要的宽。我没有为它们设置任何宽度、边距或填充。但它们仍然更宽。你能给我一个解决方案，让跨距变成文本宽度的大小吗。

我想要像贝娄一样的东西：

---

您需要指定一个表行，表单元格才能正常工作。试试这个：

form {display: table;}
label{
    display: table-row;
    width: 100%;
    border-bottom: solid $grey_dark 1px;
}

最新答复：

label{
    display: block;
    width: 100%;
    border-bottom: solid #333 1px;
    padding: 10px;
}
span{
    display: inline-block;
    padding-right: 15px;
    font-weight: 700;
    font-size: 20px;
}
input, textarea{
}

---

您需要指定一个表行，以便表单元格正常工作。试试这个：

form {display: table;}
label{
    display: table-row;
    width: 100%;
    border-bottom: solid $grey_dark 1px;
}

最新答复：

label{
    display: block;
    width: 100%;
    border-bottom: solid #333 1px;
    padding: 10px;
}
span{
    display: inline-block;
    padding-right: 15px;
    font-weight: 700;
    font-size: 20px;
}
input, textarea{
}

---

您需要使用表格行，而不是显示为span的表格

label{
    display: table-row;
    width: 100%;
    border-bottom: solid $grey_dark 1px;
}

---

您需要使用表格行，而不是显示为span的表格

label{
    display: table-row;
    width: 100%;
    border-bottom: solid $grey_dark 1px;
}

---

这里是一个小提琴的OP的代码你不能设置一个宽度的跨度？如中所示，为所有的线设置相同的宽度，以便它们对齐。我想这就是你要做的这里有一堆OP的代码你不能给跨度设置一个宽度吗？如中所示，为所有的线设置相同的宽度，以便它们对齐。我想在我试过之后你就是这样。没有帮我做我想要的。如果使用表格、表格行和表格单元格，则所有跨距都具有相同的宽度（最宽的宽度）。我希望每个跨度的宽度可变，那么你就不需要桌子了。默认情况下，同一列中的表格单元格的宽度始终相同。您可以在此处尝试一个div，并将跨度放在其中。我不太确定你现在想要什么，但是表格单元格中的另一个容器可能会给你足够的灵活性去做任何事情。是的，我根本没有看到一个表格。也许可以将跨度设置为显示：内联块；并为每个表格设置正确的宽度。整个表格不是一张桌子。我不能那样做。这就是为什么我将每个标签设置为一个表。另外，在这种情况下，设置每个元素的宽度对我来说不是一个解决方案。我试过了。没有帮我做我想要的。如果使用表格、表格行和表格单元格，则所有跨距都具有相同的宽度（最宽的宽度）。我希望每个跨度的宽度可变，那么你就不需要桌子了。默认情况下，同一列中的表格单元格的宽度始终相同。您可以在此处尝试一个div，并将跨度放在其中。我不太确定你现在想要什么，但是表格单元格中的另一个容器可能会给你足够的灵活性去做任何事情。是的，我根本没有看到一个表格。也许可以将跨度设置为显示：内联块；并为每个表格设置正确的宽度。整个表格不是一张桌子。我不能那样做。这就是为什么我将每个标签设置为一个表。另外，在这种情况下，为每个元素设置宽度对我来说不是一个解决方案。