离子 - 改变离子搜索栏的宽度答案

【问题标题】：Ionic - Changing width of ion-searchbar离子 - 改变离子搜索栏的宽度
【发布时间】：2018-07-24 14:13:27
【问题描述】：

我想知道如何在 Ionic 3 中更改离子搜索栏及其容器类“工具栏内容”的宽度

我可以简单地使用这些 css 属性创建一个类来改变搜索栏的宽度：

width: 90%;
margin: auto;

但是，这会使其自动生成的容器 div 仍然具有完整的原始宽度。

这是搜索栏在上面提到的 css 中的样子

但是容器 div 仍然具有完整宽度。（见下图）

如图所示，尽管实际 ion-searchbar 的宽度发生了变化，但仍有一个带有未改变宽度的工具栏内容类的 div。

我尝试过覆盖工具栏内容和工具栏内容 ios 类的宽度，但是，这似乎不起作用。

这里是使用的标题的 HTML：

<ion-header>
    <ion-navbar mode="ios">
        <ion-buttons start>
            <button ion-button icon-only>
                <ion-icon name="settings"></ion-icon>
            </button>
        </ion-buttons>
        <ion-searchbar id="home-search" placeholder="Search Groups & Connections" (ionInput)="filterItems($event)" (ionClear)="resetFilter($event)"></ion-searchbar>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

非常感谢您抽出宝贵的时间，我们将非常感谢您提供任何正确方向的建议或指示！

【问题讨论】：

尝试删除 CSS 中的填充 .toolbar .searchbar{padding: 0px}
@MohanGopi 实际上没有任何填充，我应该提到我已经尝试过我的错误。不过还是谢谢你的建议！

标签： html css ionic-framework ionic2 ionic3

【解决方案1】：

通过将此 CSS 添加到 ion-buttons 来解决它：

margin: auto;
flex-basis: 50px;

原来搜索栏会填满剩余的空间，两边的按钮会像我想要的那样居中。

【讨论】：