gpt4 book ai didi

javascript - 如何防止 awesomplete 破坏布局

转载 作者:行者123 更新时间:2023-11-30 16:03:39 24 4
gpt4 key购买 nike

似乎awesomplete (一个用于自动完成功能的不错的 javascript 库)在加载 HTML 页面期间执行 javascript 时添加一个 div,从而破坏布局并将标签进​​一步向下移动,因为标签“Session Id”随后位于分区:

enter image description here

我怎样才能避免这种情况?

完整示例如下:

<!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 应用于 Session Id: label 元素

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

关于javascript - 如何防止 awesomplete 破坏布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37340190/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com