如何在输入字段下方放置文本？

Question

这可能听起来很简单，但我是新手。 所以我有这个输入框：

<input type="text" name="username" id="username" class="form-control" value="{{username}}">
<div class="error" id="nameErr"></div>

我有一个功能，如果用户名的输入框为空，“用户名不能为空”将出现在该div class="error" 。 它已经在运行，但它出现在输入框的右侧，它应该在输入框下方。 请帮我解决这个问题谢谢:)

Answer 1

最直接的方法是让input有一个block的display css属性

input { display: block; }

使用最适合您在应用程序中应用 css 的任何 CSS 选择器，我使用输入仅作为示例。

这是如何工作的，输入元素默认是inline-block ，并且会并排放置。 Div 元素默认是块级元素，会尝试并堆叠。 将输入更改为也块现在将堆叠输入和 div。

Answer 2

只需将您的错误标记为 display: inline-block ，它就会在输入字段旁边。

#nameErr {
  display: inline-block;
}

代码笔

Answer 3

最快的解决方案是使用 add display: inline-block到您的输入标签。 我建议您检查您的页面并测试您对 html 的更改，并在您满意后将其复制到您的 css 文件中。

Answer 4

您只需要为错误类放置 display: 块，这样它就会出现在输入框下方。 默认情况下，它是“内联块”，只需检查查找类。

Answer 5

如果没有您自己的 CSS 样式，就很难确定您的代码在哪里出错以及可以修复哪些内容以实现您想要的。 不过，我在下面创建了一个最小的工作示例（尝试在文本字段中插入一个字符，然后清空文本字段）：

 const input = document.querySelector('input') const error = document.querySelector('.error') input.addEventListener('keyup', e => { error.style.opacity = !input.value ? 1 : 0 })

 * { font-family: sans-serif; } input { display: block; padding: 10px; width: 35vw; border-radius: 5px; border: 1px solid #00000022; } input:focus { border: 1px solid #1aa3e8DD; } input::placeholder { color: #000000AA; } .error { padding: 10px; padding-top: 5px; font-size: .75rem; color: #FF0000BB; opacity: 0; }

 <input type="text" name="username" id="username" class="form-control" placeholder="Your username"> <div class="error" id="nameErr">Username cannot be empty</div>