CSS：在不导航父元素的情况下，将元素彼此并列。柔性？

Question

我正在用Ionic构建库，其中一项要求是我不能添加类，也不能使用父元素或容器来修改或访问我们的元素。

带有按钮的搜索字段在图片中看起来像ike

我只有两个兄弟姐妹元素：

<ion-button fill="clear">Button</ion-button>
<ion-searchbar clear-icon="close-circle"></ion-searchbar>

如何强制搜索字段减小其宽度并为同级按钮元素和位于右侧的按钮腾出空间？

如果我可以使用容器元素，那么可以通过Flexbox轻松地做到这一点，对内容进行对齐和对齐。但是由于这是一个库，所以我们不知道父元素的外观，也不想添加新元素或强制开发人员依赖不需要的元素。

任何帮助都将受到欢迎！

Answer 1

使用CSS：

ion-button {
  float: right;
}

ion-searchbar {
  display: block;
  width: auto;
}

为此，您的离子按钮应该是第一个元素。如果您的搜索栏是第一个元素，则只需切换样式即可。

由于它们都是相同的高度，因此您不需要清除浮动

示例：

A {
  float: right;

  /* ignore this */
  height: 50px;
  background: green;
}

B {
  display: block;
  
  /* ignore this */
  height: 50px;
  background: red;
}

<A> Some Text </A>
<B></B>