如何在隐藏搜索栏未指定元素后取消float:left并设置margin:0 auto？

要实现搜索隐藏不匹配元素后，让剩余显示的元素取消float: left并设置margin: 0 auto，只需要在你的过滤逻辑里，针对显示/隐藏的元素分别调整样式即可，具体修改如下：

修改思路 #

1. 对于匹配搜索条件、需要显示的元素：
   • 恢复元素显示状态
   • 取消浮动属性：float: none
   • 设置居中外边距：margin: 0 auto
2. 对于不匹配、需要隐藏的元素：
   • 隐藏元素
   • 可选还原原浮动样式（避免后续搜索显示时样式错乱，根据你的初始布局调整）

修改后的完整代码 #

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      // 匹配元素：显示并调整布局样式
      li[i].style.display = "";
      li[i].style.float = "none";
      li[i].style.margin = "0 auto";
    } else {
      // 不匹配元素：隐藏并还原原浮动样式（根据初始样式调整）
      li[i].style.display = "none";
      li[i].style.float = "left";
    }
  }
}

关键说明 #

• 如果你的元素初始浮动不是left，记得把else分支里的float: "left"改成对应的初始值，这样下次搜索匹配时样式能正常重置。
• margin: 0 auto生效的前提是元素有明确的宽度（比如设置了width属性），否则居中效果可能不明显，你可以根据实际情况给元素添加固定宽度或者最大宽度。

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