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

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

Answer 2

您需要使用 table-row ，而不是显示为span的表格。

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