如何让这两个按钮和字段在同一行？

Question

如何将按钮和字段放在同一行？

现在的样子：

这是我的HTML

click(locator){

    // do something first
    console.log('something');

    // finally click the element
    this.helpers["WebDriverIO"].browser.click(locator);
}

这是我的<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> 班级

book-invoice-updown

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

.book-invoice-updown {
    display: inline-block; 
    height: 40px;
    width: 100%;
}

Answer 1

我认为将vertical-align: middle;添加到按钮/输入的CSS规则中应该让它们按照您希望的方式排列。

在w3schools上查看本教程： https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

＆＃13;

＆＃13;

.book-invoice-updown {
    display: inline-block; 
    height: 40px;
    width: 100%;
}
.book-invoice-updown button, .book-invoice-updown input {
    vertical-align: middle;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

也可能是您的输入或按​​钮具有“浮动”功能。财产或影响其路线的其他一些因素。如果您提供一个简单，完整的代码示例，我们可以看到问题再现，将会更容易诊断。

Answer 2

当我测试时，所有元素都是display: inline。

也就是说，你还有其他几个按钮和输入显示。我想你可能也有不同的风格设置。我会使用你的浏览器＆＃34; Inspect Element＆＃34;功能（其开发人员工具的一部分），以查看所有元素周围的填充，边距和边框。

Guide to Inspect Element

祝你好运。

Answer 3

如果你发布了HTML和CSS的其余部分（在一个片段和一个小提琴中），它会有很大的帮助，以便给出更大的图片。

首先，您可以通过添加来消除多余的浏览器添加的边距和填充 {CSS}文件顶部的*{margin:0; padding:0;}。这样，您在后续规则中设置的边距和填充将是准确的。

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

（顺便说一句，要检查一个元素，右键单击页面并选择'Inspect' - 这是一种方式！你可以像Firebug一样使用扩展来检查你的代码。）