Html 如何使这两个按钮和字段位于同一行上？

如何使按钮和字段位于同一行

这就是它现在的样子：

这是我的HTML

<td class="book-mid" style="width:48%;">
    <div class="book-invoice-updown">
        <button class="book-button book-text-button col-std-money" style="max-width:36px;" ng-click="vm.invoiceDelLine($index);">
            <md-icon class="material-icons book-material" aria-label="Close">arrow_upwards</md-icon>
        </button>
        <button class="book-button book-text-button col-std-money" style="max-width:36px;" ng-click="vm.invoiceDelLine($index);">
            <md-icon class="material-icons book-material" aria-label="Close">arrow_downwards</md-icon>
        </button>
        <input type="text" ng-model="invoiceLines.lineText"  id="lineText" class="book-field book-field-slim">
    </div>
</td>

这最终成为我的解决方案，现在它可以很好地扩展到所有设备：

<td class="book-mid nowrap" style="width:48%;">
    <table style="width:100%"><tr>
        <td style="width:10%; vertical-align:middle;">
            <button class="book-button book-text-button col-std-money" style="max-width:32px; margin-right:2px;" ng-click="vm.invoiceLineUp($index);">
                <md-icon class="material-icons book-material" aria-label="Up">arrow_upwards</md-icon>
            </button>
        </td>
        <td style="width:10%; vertical-align:middle;">
            <button class="book-button book-text-button col-std-money" style="max-width:32px;" ng-click="vm.invoiceLineDown($index);">
                <md-icon class="material-icons book-material" aria-label="Down">arrow_downwards</md-icon>
            </button>
        </td>
        <td style="width:80%; vertical-align:middle;">
            <input type="text" ng-model="invoiceLines.lineText" id="lineText" class="book-field book-field-slim">
        </td>
    </tr></table>
</td>

向上箭头
向下箭头

---

我认为添加

垂直对齐：中间到你的CSS规则中的按钮/输入应该让它们按照你想要的方式排列

请参见本教程中有关w3schools的内容：


。向上向下预订发票{
显示：内联块；
高度：40px；
宽度：100%；
}
.book invoice updown按钮，.book invoice updown输入{
垂直对齐：中间对齐；
}

向上箭头
向下箭头
我认为添加
垂直对齐：中间到你的CSS规则中的按钮/输入应该让它们按照你想要的方式排列

请参见本教程中有关w3schools的内容：


。向上向下预订发票{
显示：内联块；
高度：40px；
宽度：100%；
}
.book invoice updown按钮，.book invoice updown输入{
垂直对齐：中间对齐；
}

向上箭头
向下箭头
当我测试这个时，所有元素都是
显示：内联的

也就是说，您确实显示了其他几个按钮和输入。我想你可能也有不同的风格设置。我会使用浏览器的“检查元素”功能（其开发工具的一部分）来查看所有元素周围的填充、边距和边框


祝你好运。
当我测试这个时，所有元素都是
display:inline

也就是说，您确实显示了其他几个按钮和输入。我想你可能也有不同的风格设置。我会使用浏览器的“检查元素”功能（其开发工具的一部分）来查看所有元素周围的填充、边距和边框


祝你好运。
如果你发布了剩下的HTML和CSS（在一个片段和一个提琴中），以提供一个更大的图片，这将非常有帮助

首先，您可以通过添加
*{margin:0；padding:0；}
位于CSS文件的顶部。这样，在后续规则中设置的任何边距和填充都将是准确的

另外，您可以使用
垂直对齐
来对齐表行中的元素（中间或顶部-我更经常使用中间）。这可能会使元素显示更接近您所追求的内容

（顺便说一句，要检查一个元素，右键单击页面并选择“检查”-这是一种方法！您可以使用Firebug等扩展来检查代码。）
如果您发布HTML和CSS的其余部分（在一个片段和一把小提琴中），以提供更大的图片，这将非常有帮助

首先，您可以通过添加
*{margin:0；padding:0；}
位于CSS文件的顶部。这样，在后续规则中设置的任何边距和填充都将是准确的

另外，您可以使用
垂直对齐
来对齐表行中的元素（中间或顶部-我更经常使用中间）。这可能会使元素显示更接近您所追求的内容

（顺便说一句，要检查一个元素，右键单击页面并选择“检查”-这是一种方法！您可以使用Firebug等扩展来检查代码。）
我做了很多检查，将边距和填充设置为0，垂直对齐所有内容，当我最终让它们对齐时（通过在字段上设置宽度）他们失去了适当扩展的能力。所以我用一个表格来解决它们（我在问题中加入了HTML）@torbenrudgaard太棒了！很高兴能提供帮助：）可伸缩性可以通过媒体查询来解决（而不是使用表格）p.s.看起来很漂亮；）是的，但这对媒体查询来说太麻烦了。我认为前方的道路将是Flexbox，看起来非常坚固！w3schools.com/css/css3_flexbox。asp@torbenrudgaard我知道flexbox。你仍然应该调查媒体的疑问，它们并不难，也不完全是我所说的太麻烦；无论如何，他们很高兴知道我做了很多检查，将边距和填充设置为0，垂直对齐所有内容，当我最终让他们对齐（通过在字段上设置宽度）时，他们失去了正确缩放的能力。所以我用一个表格来解决它们（我在问题中加入了HTML）@torbenrudgaard太棒了！很高兴能提供帮助：）可伸缩性可以通过媒体查询来解决（而不是使用表格）p.s.看起来很漂亮；）是的，但这对媒体查询来说太麻烦了。我认为前方的道路将是Flexbox，看起来非常坚固！w3schools.com/css/css3_flexbox。asp@torbenrudgaard我知道flexbox。你仍然应该调查媒体的疑问，它们并不难，也不完全是我所说的太麻烦；无论如何，他们很高兴知道
<td class="book-mid nowrap" style="width:48%;">
    <table style="width:100%"><tr>
        <td style="width:10%; vertical-align:middle;">
            <button class="book-button book-text-button col-std-money" style="max-width:32px; margin-right:2px;" ng-click="vm.invoiceLineUp($index);">
                <md-icon class="material-icons book-material" aria-label="Up">arrow_upwards</md-icon>
            </button>
        </td>
        <td style="width:10%; vertical-align:middle;">
            <button class="book-button book-text-button col-std-money" style="max-width:32px;" ng-click="vm.invoiceLineDown($index);">
                <md-icon class="material-icons book-material" aria-label="Down">arrow_downwards</md-icon>
            </button>
        </td>
        <td style="width:80%; vertical-align:middle;">
            <input type="text" ng-model="invoiceLines.lineText" id="lineText" class="book-field book-field-slim">
        </td>
    </tr></table>
</td>