css - 我的 css 字符串跳了一行

Question

我现有的网络应用程序使用 css div class="medBlutext"作为文本:

 .medBluText {font: 0.7em  Book Antiqua, Georgia, Times New Roman, serif; font-size: 12px; color: #0000ff;}

当我像这样在按钮或其他表单字段旁边使用此 div 标签时:

        <tr>
          <td align="Right"><div class="medGreyTextbold">Subject</div></td>
          <td>
            <input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
            <input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
            <cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
          </td>
        </tr>

url.err 中的错误消息没有出现在提交按钮的同一行，而是出现在提交按钮的下方。就像提交按钮后有一个中断标记。如果我不使用 div 标签，消息会出现在发送按钮旁边，但我需要使文本始终显示相同，所以我需要使用 div 标签。我怎样才能仍然使用这个 div 标签并使文本出现在同一行？

Answer 1

您的 CSS 样式只有字体属性，没有什么可以阻止您在 span 等其他元素上使用它。您所看到的样式差异在于 div 是 block 级元素。它将始终占据其包含元素的整个宽度。这意味着它将在新的一行开始。请改用 span 之类的内联元素。由于您的样式不使用margin 和仅 font 属性，因此两个元素应该显示相同。

.response-text {
  color: #0000ff;
  font: 12px  'Book Antiqua', Georgia, 'Times New Roman', serif;
}

<label for="subject">Subject</label>
<input type="text">
<span class="response-text">Some error occurred</span>

您还可以将 div 设置为 display: inline; 使其表现得像 span 这样的内联元素。

---

FWIW 我会考虑对不使用特定属性值的 CSS 类使用不同的命名约定，例如 blue。请参阅上面的示例。现在，如果文本颜色变为红色，则您没有显示红色文本且类为 .medBlueText 的元素。

您可能希望从表单中移除表格。不是强制性的，但它们比使用 div 灵活得多。您甚至可能想在 flexbox 工作.