Question

似乎awesomplete（用于自动完成功能的一个不错的javascript库）在加载HTML页面时执行javascript时会添加div，从而打破布局并将标签进一步向下移动，因为标签然后“会话ID”在div之外：

我该如何避免这种情况？

完整样本如下：

<!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>

Answer 1

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

即

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

另一个更清洁的解决方案是将vertical-align: middle应用于这两个元素，即标签和自动完成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>

Answer 2

我认为您可以尝试在浏览器中运行检查器工具来检查.awesomplete样式定义并覆盖它。

Answer 3

仅供参考，与此同时，我通过在标签上添加以下样式定义找到了一种解决方法：style="position:relative;top:-5px"，不是很好，但它似乎适用于我的情况。

如何防止awesomplete打破布局

3 个答案: