似乎awesomplete(用于自动完成功能的漂亮javascript库)在加载HTML页面时执行javascript时会添加div
,从而破坏了布局并将标签进一步向下移动,因为标签“ Session 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>
最佳答案
将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>