文章/答案/技术大牛

发布

社区首页 >问答首页 >如何防止异类破坏版面

问如何防止异类破坏版面
EN

Stack Overflow用户

提问于 2016-05-20 07:11:10

回答 3查看 1.3K关注 0票数 1

似乎阿威索 (一个用于自动完成功能的不错的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>

javascript

html

autocomplete

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-05-20 09:35:51

将vertical-align: top应用于会话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>

票数 2

Stack Overflow用户

发布于 2016-05-20 07:19:44

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

票数 0

Stack Overflow用户

发布于 2016-05-20 08:06:02

FYI，同时，我在标签中添加了以下样式定义，找到了一个解决办法：style="position:relative;top:-5px"，不是很好，但在我的情况下似乎有效。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37340190

复制

相似问题

问如何防止异类破坏版面
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止异类破坏版面EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止异类破坏版面
EN