如何将用户搜索栏宽度设为100%？CSS设置无效解决方案

你的CSS没生效大概率是这几个原因，对应解决方案如下：

• 提升样式优先级
  原有选择器可能被插件或主题的默认样式覆盖，试试给选择器加更高优先级，或者给width属性加!important强制生效：

  body .um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      width: 100% !important;
  }
  

• 解除父容器宽度限制
  如果搜索栏的父容器.um-member-directory-header-row本身有固定宽度或最大宽度限制，子元素的100%宽度就会被限制，需要一并修改：

  .um-directory .um-member-directory-header .um-member-directory-header-row {
      width: 100% !important;
      max-width: none !important;
  }
  

• 让内部输入框占满空间
  有时候外层设置了100%，但内部的输入框还是固定宽度，需要让它自适应填充剩余空间：

  .um-directory .um-member-directory-search-line input.um-search-field {
      flex: 1;
      width: 100% !important;
  }
  

把以上代码添加到你的主题自定义CSS区域或者插件的自定义样式面板里，刷新页面后就能看到搜索栏铺满宽度的效果了。

内容的提问来源于stack exchange，提问作者Slapperoni