Question

我有一个输入框，我想在它下方有一些漂亮的浅灰色文本（1行指令）。

到目前为止，文本位于比文本框（位于文本框上方）更低的位置。

我正在做清楚：两者，如果我删除它，则下一个一直到输入框右侧。

这里有什么问题？

Answer 1

这一切都取决于放置文本的HTML标签。每个元素都有默认行为。

DIV元素将显示为块。因此，它将显示在页面中HTML的自然流程中的以下行。它还会导致它后面的所有HTML显示在它下面。

SPAN元素不会显示为块。事实上，它没有自己提供视觉上的变化，也没有应用CSS。 SPAN元素只是内联显示，一切都像正常一样在它周围流动。

您可以使用CSS样式修改HTML元素的布局行为。

例如，您可以使用float:left或float：right指定将DIV元素显示在HTML内容的左侧或右侧。然后你可以使用CSS clear：both指定一个元素应该显示在所有浮动内容之下。

因此，在您的情况下，如果删除clear:both样式，则该元素将不再显示在浮动元素下方，这将导致您的元素重新排列。

-Frinny

Answer 2

您的HTML标记（对于文本输入和其下方的文本段落）都具有默认边距和填充。可能通过减少文本输入的margin-bottom属性以及段落的margin-top来解决问题。这是一些示例代码。

CSS：

.text_input_style {margin-bottom:0;}
.help_text_style {margin-top:0;clear:both;}

HTML：

<input type="text" value="default value" name="text_input" class="text_input_style" />
<p class="help_text_style">Help text here.</p>

显然，您不必使用类（您可以只附加到HTML元素和/或ID），但这是个主意。

底线：在帮助文本的输入和margin-top上调整margin-bottom。

Answer 3

你可以通过应用它来提高它：

.class { position: relative; top: -5px; }

或者你可以减少行高：

.class { line-height: 10px; }

您必须拥有clear: both才能使其转到下一行，但由于它是新行，因此应用了line-height属性。减小线高应使其更高，如果距离不够近，请尝试相对定位。

Answer 4

你可能在“指令”上有填充。相关的HTML和CSS可能吗？