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

Question

这是我的 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>

和 CSS:

label{
    display: table;
    width: 100%;
    border-bottom: solid $grey_dark 1px;
}
span{
    display: table-cell;
    font-weight: 700;
    font-size: 20px;
}
input, textarea{
    display: table-cell;
    width: 100%;
}

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

我想要像下面这样的东西:

Answer 1

您需要指定表格行，表格单元格才能运行。试试这个:

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{
}