Javascript 更改clarity design上标题输入项的大小

我使用的标题栏来自

clearity.design

示例，我对其进行了修改，试图使搜索输入占据标题栏中心的100%，但我无法做到这一点

守则：

项目清晰度
我的菜单
偏好
注销

您的问题的解决方案是CSS

我在下面给了你一个例子，告诉你从哪里开始

如果这对你有帮助，请告诉我

/*首先，使元素向左或向右浮动*/
.标题-6分区
，.页眉-6表格{
浮动：左；
}
分区头操作{
浮动：对；
}
/*然后给他们一些空间*/
品牌部
，form.search
，div.header-actions{
左侧填充：20px；
右边填充：20px；；
}
/*其余的是使用FontAwesome和CSS添加图标和其他内容*/

项目清晰度
我的菜单
偏好
注销

您的问题的解决方案是CSS

我在下面给了你一个例子，告诉你从哪里开始

如果这对你有帮助，请告诉我

/*首先，使元素向左或向右浮动*/
.标题-6分区
，.页眉-6表格{
浮动：左；
}
分区头操作{
浮动：对；
}
/*然后给他们一些空间*/
品牌部
，form.search
，div.header-actions{
左侧填充：20px；
右边填充：20px；；
}
/*其余的是使用FontAwesome和CSS添加图标和其他内容*/

项目清晰度
我的菜单
偏好
注销

标题使用flex box进行布局

下面是一个使用以下css覆盖默认搜索样式的示例

CSS

---

它应该给你一个调整应用程序视觉风格的起点。您可能还需要处理响应性用例

标题使用flex box进行布局

下面是一个使用以下css覆盖默认搜索样式的示例

CSS

---

它应该给你一个调整应用程序视觉风格的起点。您可能还需要处理响应性用例

我知道。这并不完美。我相信还有其他方法可以做到这一点，但这应该是一个良好的开端。谢谢你的帮助。目前的解决方案不起作用，我添加了以下内容：

form{width:50%；min width:50%；}form>input{width:100%；}

它不是全宽的，而且是一个黑客解决方案，但至少它能很好地处理头的响应行为。我知道。这并不完美。我相信还有其他方法可以做到这一点，但这应该是一个良好的开端。谢谢你的帮助。目前的解决方案不起作用，我添加了以下内容：

form{width:50%；min width:50%；}form>input{width:100%；}

它不是全宽的，是一个黑客解决方案，但至少它可以很好地处理头的响应行为。

.search {
  border: 1px solid deeppink;
  flex: 1 1 auto;
  max-width: none;
}

.search > label {
  flex: 1 1 auto;
  max-width: 90%;
}

.search > label > input {
  width: 100%;
}