取自 Bulma CSS 框架文档的示例表单控件使用 Bulma 0.7.2(撰写本文时为最新版本)按预期工作。
但是,当将表单放入标准 html 中时 <details>
标记,元素的高度发生变化,并且(输入的?)一些宽度发生变化,因此将鼠标悬停在输入上时会出现视觉故障。
这是什么原因造成的,是否有一种样式可以应用于 <details>
使表单元素正确显示的标记?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
<br>
<br>
<details>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</details>
编辑:作为一个更简单的例子,单个 <input class="input" type="text" placeholder="Find a repository">
的样式也是错误的<details>
内的元素标签。
最佳答案
发生这种情况的原因是因为输入和按钮中的填充是根据 em 计算的,并且因为输入在 <details>
中。标签,它一定会以某种方式干扰比例 - 请参见下图:
我不熟悉这个框架,我不确定是否有办法调整这个问题。在任何情况下,最快的解决方法是针对 <details>
中的输入和按钮。标记并向 <details>
中的按钮和输入添加静态 padding-top 和 padding-bottom 0标签:
details .input,
details .button{
padding-bottom: 0;
padding-top: 0;
}
在那之后,我发现如果将输入的最大宽度减少到 89% 而不是 100%,它会修正悬停问题:
details .input{
max-width: 89%;
}
关于css - 仅当在无样式的 HTML Details 标签内时,表单元素样式不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54048487/