css输入填充与span-padding不同

Question

我有这段代码：

echo "<table class='tpT'>";

foreach ($blueprints as $key => $blueprint) {
    echo "<tr><td><span class='neutral'>Slot</span></td><td><input type='text' class='tpI' size='1'><span class='slotTypeOne'>{$blueprint['slot']}</span></td></tr>";
}

echo "</table>";

blueprints - 数组中的

是两个元素。只有两个名字，我想要显示

但这两行看起来并不相同。它们略有不同。

您会看到，在第一行中，input - 字段略高于红色span - 元素。但在第二排，它们完美地相互贴合。我不知道为什么。我的意思是，两行应该看起来一样。我想是这样，至少。

这是我的CSS：

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 100%; 
            font-family: Arial;
}

body {
    background: rgba(41, 128, 185,1.0);
    background-attachment: fixed;
}




input.tpI {

    background: rgba(236, 240, 241,.8);
    border: none;
    color: #333;
    width: auto;
    max-width: 100%;
    padding: 5px;

}

table.tpT {
    width: 100%;
    background: rgba(50, 50, 50, .6);
    border-top: 2px solid rgba(50, 50, 50, .2);
    border-bottom: 2px solid rgba(50, 50, 50, .2);
    color: #ddd;
    padding: 5px;
}


.tpT td {
    padding: 4px;

}


span.slotTypeOne {
    background: #d35400;
    color: #fff;
    padding: 5px 7px 5.1px 7px;
}

span.neutral {
    color: #333;
    background: rgba(250, 250, 250, 1);
    padding: 5px;
    width: auto;
    border: none;
}

我在每个浏览器中看起来都不同。但它们都不是完美的。我不知道为什么。因为padding是5px。对于两者。

有什么想法吗？

编辑：

jsfiddle：jsfiddle.net/4wA7r/1

Answer 1

我不确定，但我想这来自行高。 您的输入和跨度默认情况下不具有相同的行高。所以你必须将它设置为相同。

span.slotTypeOne { 

  background: #d35400;
    color: #fff;
    padding: 5px 7px 5px 7px;
    line-height: 20px;
    display: block;
    float: left;

}
input.tpI {

    background: rgba(236, 240, 241,.8);
    border: none;
    color: #333;
    width: auto;
    max-width: 100%;
    padding: 5px;
    line-height: 20px;
    display: block;
    float: left;
}

正如您所看到的，我必须将这些元素设置为显示：阻止，因为它们无法保持内联元素（或者我们无法调整＆＃34;内部线条高度＆＃34; ）。

这可以在这里工作：http://jsfiddle.net/4wA7r/4/