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 -array

兩個元素。只有兩個名字，我想要顯示

但是兩行看起來不一樣。他們有些不同。

你看，在第一行中，該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; 
} 

正如你所看到的，我必須設置這些元素爲display：block，因爲他們可以不留行內元素（或我們不能調整「內部行高」）。

這個作品在這裏：http://jsfiddle.net/4wA7r/4/