最后一个输入文本字段比左边的图像低一点。同时，这些元素高于其他元素。
我想将输入类型编号移动到与所有圆形图像相同的级别，并将它们移动到与 X 相同的级别。但是，当我尝试添加 CSS 属性时，圆形+输入字段一起移动。无法弄清楚如何只移动一个元素。这是代码，删除了不必要的元素:
table {
font-size: 7px;
font-weight: normal;
margin: 45px;
text-align: center;
border-collapse: collapse;
}
th {
font-size: 9px;
font-weight: bold;
padding: 8px;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
height:5px;
}
td {
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
white-space: nowrap ;
}
td:hover{
background: #F1F1F2;
}
tr:hover td {
background-color: #ccd7ff;
}
.results {
-webkit-filter: grayscale(80%); /* Chrome, Safari, Opera */
filter: grayscale(80%);
}
.results:hover {
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
.valueRes {
font-style: italic;
}
.extra {
width: 300px;
}
#manual {
float:right; /* without this, the input number field is below the circles and I need it next to them */
height:8px;
width:40px;
font-size: 9px;
float:none;
margin-left: 3px;
}<body>
<table id="pendents">
<tbody>
<tr>
<th colspan="9"> data</th>
<th id="valueRes" colspan="6" style="color: rgb(102, 102, 153);">Pendent</th>
</tr>
<tr id="headers">
<th>data</th>
<th>Dia</th>
<th>Hora</th>
<th>data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th>data</th>
<th colspan="5">data</th>
</tr>
<tr class="sube" id="0">
<td>data</td>
<td>24-06</td>
<td>13:33:00</td>
<td>data</td>
<td>---</td>
<td>---</td>
<td>Mdata</td>
<td>-5</td>
<td><img src="./res/no.png" alt="HA" height="16" width="16"></td>
<td>
<img src="./res/creurojo.png" class="results" alt="creurojo" height="16" width="16" id="creurojo0" onmouseover="Update(0, 0, 0);" onmouseout="Restore(0)" onclick="Update(5, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/hanegatiu.png" class="results" alt="hanegatiu" height="16" width="16" id="hanegatiu0" onmouseover="Update(1, 0, 0);" onmouseout="Restore(0)" onclick="Update(6, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/void.png" class="results" alt="void" height="16" width="16" id="void0" onmouseover="Update(2, 0, 0);" onmouseout="Restore(0)" onclick="Update(7, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/hapositiu.png" class="results" alt="hapositiu" height="16" width="16" id="hapositiu0" onmouseover="Update(3, 0, 0);" onmouseout="Restore(0)" onclick="Update(8, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/winverde.png" class="results" alt="winverde" height="16" width="16" id="winverde0" onmouseover="Update(4, 0, 0);" onmouseout="Restore(0)" onclick="Update(9, 0, {"code":"2016-06-24 13:33:48"});">
<input type="number" id="manual" name="manual" step="any">
</td>
</tr>
</tbody>
</table>
</body>很确定这是在某个地方但找不到它，相关问题太多。
最佳答案
正如@jeff 在评论中提到的，vertical-align会解决你的问题，但它可能有跨浏览器问题。你也有非偶数的<td> .我加了一个额外的<td>为输入。我通过更正您的表格布局解决了您的问题。
table {
font-size: 7px;
font-weight: normal;
margin: 45px;
text-align: center;
border-collapse: collapse;
}
th {
font-size: 9px;
font-weight: bold;
padding: 8px;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
height:5px;
}
td {
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
white-space: nowrap ;
}
td:hover{
background: #F1F1F2;
}
tr:hover td {
background-color: #ccd7ff;
}
.results
{
-webkit-filter: grayscale(80%); /* Chrome, Safari, Opera */
filter: grayscale(80%);
}
.results:hover
{
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
.valueRes
{
font-style: italic;
}
.extra
{
width: 300px;
}
#manual
{
float:right; /* without this, the input number field is below the circles and I need it next to them */
height:8px;
width:40px;
font-size: 9px;
float:none;
margin-left: 3px;
}<body>
<table id="pendents">
<tbody>
<tr>
<th colspan="9"> data
</th><th id="valueRes" colspan="6" style="color: rgb(102, 102, 153);">Pendent</th></tr>
<tr id="headers">
<th>data</th>
<th>Dia</th>
<th>Hora</th>
<th>data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th>data</th>
<th colspan="5">data</th>
</tr>
<tr class="sube" id="0"><td>data</td><td>24-06</td><td>13:33:00</td><td>data</td><td>---</td><td>---</td><td>Mdata</td><td>-5</td><td><img src="./res/no.png" alt="HA" height="16" width="16"></td> <td>
<img src="./res/creurojo.png" class="results" alt="creurojo" height="16" width="16" id="creurojo0" onmouseover="Update(0, 0, 0);" onmouseout="Restore(0)" onclick="Update(5, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/hanegatiu.png" class="results" alt="hanegatiu" height="16" width="16" id="hanegatiu0" onmouseover="Update(1, 0, 0);" onmouseout="Restore(0)" onclick="Update(6, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/void.png" class="results" alt="void" height="16" width="16" id="void0" onmouseover="Update(2, 0, 0);" onmouseout="Restore(0)" onclick="Update(7, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/hapositiu.png" class="results" alt="hapositiu" height="16" width="16" id="hapositiu0" onmouseover="Update(3, 0, 0);" onmouseout="Restore(0)" onclick="Update(8, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/winverde.png" class="results" alt="winverde" height="16" width="16" id="winverde0" onmouseover="Update(4, 0, 0);" onmouseout="Restore(0)" onclick="Update(9, 0, {"code":"2016-06-24 13:33:48"});">
</td><td><input type="number" id="manual" name="manual" step="any">
</td></tr> </tbody>
</table>
</body>关于html - 无法移动输入字段以使其与其他字段对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38023024/