似乎awesomplete(用于自动完成功能的漂亮javascript库)在加载HTML页面时执行javascript时会添加div,从而破坏了布局并将标签进​​一步向下移动,因为标签“ Session Id”位于外部div:

javascript - 如何防止awesomplete破坏布局-LMLPHP

如何避免这种情况?

完整的示例如下:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://leaverou.github.io/awesomplete/awesomplete.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="https://leaverou.github.io/awesomplete/awesomplete.css">
</head>
<body>

<label>Fuzziness: </label>
<input name="fuzziness" id="fuzziness" style="width:250px;" type="text">
<br>
<label for="visitId">Session Id: </label>
<input name="visitId" id="visitId" style="width:250px;" class="awesomplete" data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" type="text">
<br>
<label for="visitorId">User Id: </label>
<input name="visitorId" id="visitorId" style="width:250px;" type="text">
<br>
</body>
</html>


实际呈现的HTML是

<label for="visitId">Session Id: </label>
<div class="awesomplete">
<input id="visitId" class="awesomplete" type="text" data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" style="width:250px;" name="visitId" autocomplete="off" aria-autocomplete="list">
...
</div>

最佳答案

vertical-align: top应用于会话ID:标签元素



<label for="visitId" style="vertical-align: top;">Session Id: </label>


另一个更清洁的解决方案将对两个元素都应用vertical-align: middle,即label和autocomplete div

<style>
  div.awesomplete {
    display: inline-block;
    position: relative;
    vertical-align: middle;// This needs to be added
  }
</style>

<label for="visitId" style="vertical-align: middle;">Session Id: </label>

10-07 19:28
查看更多