html - 将 UL 的宽度与输入（过滤器）的宽度对齐

Question

我正在做过滤搜索。当用户键入时，搜索结果会出现在 UL 下方。UL（显示过滤结果的地方）与输入不对齐。这是一个有想法的图像：

任何想法？

还有一个问题：UL 的结果没有出现在 IE 中。怎么解决？

代码：https ://jsfiddle.net/marcelpsaraiva/p40vxdmL/

			var jsonData = {
        "squadName": "Super hero squad",
        "homeTown": "Metro City",
        "formed": 2016,
        "secretBase": "Super tower",
        "active": true,
        "members": [
          {
            "id": 1,
            "name": "Molecule Man",
            "age": 29,
            "secretIdentity": "Dan Jukes",
            "powers": [
              "Radiation resistance",
              "Turning tiny",
              "Radiation blast"
            ]
          },
          {
            "id": 2,
            "name": "Madame Uppercut",
            "age": 39,
            "secretIdentity": "Jane Wilson",
            "powers": [
              "Million tonne punch",
              "Damage resistance",
              "Superhuman reflexes"
            ]
          },
          {
            "id": 3,
            "name": "Eternal Flame",
            "age": 1000000,
            "secretIdentity": "Unknown",
            "powers": [
              "Immortality",
              "Heat Immunity",
              "Inferno",
              "Teleportation",
              "Interdimensional travel"
            ]
          }
        ]
      }


      montaComponente(jsonData['members']);


			document.querySelector("#search_json").addEventListener('blur', function() {
         
        let opcoesLi = document.querySelectorAll('.opcao');

        esconderOpcoes(opcoesLi);
      });


			document.querySelector("#search_json").addEventListener('keyup', function() {
			   
         let texto_filtro = document.getElementById("search_json").value.toLowerCase();
         let lista_elem = [...document.querySelectorAll('.opcao')];
         let opcoesLi = document.querySelectorAll('.opcao');

         let filtrado = (filt) => {

            if(filt.innerText.toLowerCase().includes(texto_filtro) === true){
              document.getElementById(filt['id']).style.display = "block";
            }else {
              document.getElementById(filt['id']).style.display = "none";
            }

          }

          if(texto_filtro.trim() != '') {
            let arrayFiltrado = lista_elem.filter(filtrado);
          }else{
            esconderOpcoes(opcoesLi);
          }
			});


      function montaComponente(jsonDados) {

        var selecao = document.querySelector("#lista-opcoes");

        for (var i = 0; i < jsonDados.length; i++) {

          var opt = montaLi(jsonDados[i]['id'], jsonDados[i]['name']);

          selecao.appendChild(opt);
        }
        
      }


      function montaLi(id_dado, texto_dado) {
        var opt = document.createElement("li");
        var link = document.createElement("a");

        opt.classList.add("opcao");
        opt.setAttribute('id', 'opcao_'+id_dado);
        opt.style.display = 'none';
        
        link.textContent = texto_dado;

        opt.appendChild(link);

        return opt;
      }


      function esconderOpcoes(opcoes) {

        for (var i = 0; i < opcoes.length; i++) {
          if(opcoes[i].style.display == 'block') {
            opcoes[i].style.display = 'none';
          }
        }

      }

* {
  box-sizing: border-box;
}

      #search_json {
        float: right;
        background-image: url('iconfinder_icon-111-search_314478.png');
        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 150px;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
      }

      #search_json:focus {
        width: 100%;
      }

      .zerar-espaco {
        clear: both;
      }

      #lista-opcoes {
        list-style-type: none;
        padding: 0;
        /*margin: 0;*/
        position: absolute;
        margin-top: 27px;
        margin-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        width:100%;
      }

      #lista-opcoes li a {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
      }

      #lista-opcoes li a:hover:not(.header) {
        background-color: #eee;
        cursor: pointer;
      }
    

<!DOCTYPE html>
<html>
	<head>
		<title>Filtro</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h3>Filtro</h3>

		<form>
			<input id="search_json" type="text" name="" placeholder="Pesquisar.."><br>
      <ul id="lista-opcoes"></ul>
		</form>

    <div class="zerar-espaco"></div>

    <p>testando texto</p>
	</body>
</html>

标签： htmlcss

Answer 1

你可以用flexbox它来做：

var jsonData = {
        "squadName": "Super hero squad",
        "homeTown": "Metro City",
        "formed": 2016,
        "secretBase": "Super tower",
        "active": true,
        "members": [
          {
            "id": 1,
            "name": "Molecule Man",
            "age": 29,
            "secretIdentity": "Dan Jukes",
            "powers": [
              "Radiation resistance",
              "Turning tiny",
              "Radiation blast"
            ]
          },
          {
            "id": 2,
            "name": "Madame Uppercut",
            "age": 39,
            "secretIdentity": "Jane Wilson",
            "powers": [
              "Million tonne punch",
              "Damage resistance",
              "Superhuman reflexes"
            ]
          },
          {
            "id": 3,
            "name": "Eternal Flame",
            "age": 1000000,
            "secretIdentity": "Unknown",
            "powers": [
              "Immortality",
              "Heat Immunity",
              "Inferno",
              "Teleportation",
              "Interdimensional travel"
            ]
          }
        ]
      }


      montaComponente(jsonData['members']);


			document.querySelector("#search_json").addEventListener('blur', function() {
         
        let opcoesLi = document.querySelectorAll('.opcao');

        esconderOpcoes(opcoesLi);
      });


			document.querySelector("#search_json").addEventListener('keyup', function() {
			   
         let texto_filtro = document.getElementById("search_json").value.toLowerCase();
         let lista_elem = [...document.querySelectorAll('.opcao')];
         let opcoesLi = document.querySelectorAll('.opcao');

         let filtrado = (filt) => {

            if(filt.innerText.toLowerCase().includes(texto_filtro) === true){
              document.getElementById(filt['id']).style.display = "block";
            }else {
              document.getElementById(filt['id']).style.display = "none";
            }

          }

          if(texto_filtro.trim() != '') {
            let arrayFiltrado = lista_elem.filter(filtrado);
          }else{
            esconderOpcoes(opcoesLi);
          }
			});


      function montaComponente(jsonDados) {

        var selecao = document.querySelector("#lista-opcoes");

        for (var i = 0; i < jsonDados.length; i++) {

          var opt = montaLi(jsonDados[i]['id'], jsonDados[i]['name']);

          selecao.appendChild(opt);
        }
        
      }


      function montaLi(id_dado, texto_dado) {
        var opt = document.createElement("li");
        var link = document.createElement("a");

        opt.classList.add("opcao");
        opt.setAttribute('id', 'opcao_'+id_dado);
        opt.style.display = 'none';
        
        link.textContent = texto_dado;

        opt.appendChild(link);

        return opt;
      }


      function esconderOpcoes(opcoes) {

        for (var i = 0; i < opcoes.length; i++) {
          if(opcoes[i].style.display == 'block') {
            opcoes[i].style.display = 'none';
          }
        }

      }

* {
  box-sizing: border-box;
}
.form-container {
display: flex;
flex-direction: column;
align-items: flex-end;
position: relative;
}
      #search_json {
        float: right;
        background-image: url('iconfinder_icon-111-search_314478.png');
        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 150px;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
      }

      #search_json:focus {
        width: 100%;
      }

      .zerar-espaco {
        clear: both;
      }

      #lista-opcoes {
        list-style-type: none;
        padding: 0;
        position: absolute;
        margin-top: 45px;
        margin-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        width: 100%;
      }

      #lista-opcoes li a {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
      }

      #lista-opcoes li a:hover:not(.header) {
        background-color: #eee;
        cursor: pointer;
      }

<!DOCTYPE html>
<html>
	<head>
		<title>Filtro</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h3>Filtro</h3>

		<form class="form-container">
			<input id="search_json" type="text" name="" placeholder="Pesquisar..">
      <ul id="lista-opcoes"></ul>
		</form>

    <div class="zerar-espaco"></div>

    <p>testando texto</p>
	</body>
</html>