我的CSS串跳跃一行

我现有的Web应用程序使用CSS DIV CLASS =“medBlutext”的文本：我的CSS串跳跃一行

.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标签并使文本出现在同一行？

来源

2017-09-12 user1557856

'div'是一个块级元素。它将始终占据它所包含元素的整个宽度。这意味着它将开始一条新线。你需要使用一个'span'或者其他一些内联元素，并且不会试图填充包含元素的宽度。你的CSS类应该适用于任何元素，它只有与字体相关的声明。你没有像'margin'这样的属性会被像span这样的内联元素忽略。 – hungerstar

'div'是一个“块”，所以它使用它可以获得的所有宽度，因此将其更改为“inline”标签，例如'span' ... –

<div>是一个块级元素，它将打破一条新线。改为使用display:inline-block。

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

<table> 
 
<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> 
 
</table>

来源

2017-09-12 15:25:17 jfeferman

谢谢！非常感谢 – user1557856

你的CSS样式不仅具有字体属性，没有什么阻止你使用它像一个span其他元素。你看到的造型差异在于div是块级元素。它将始终占据它所包含元素的整个宽度。这意味着它将开始一条新线。改为使用内联元素，如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类不同的命名约定。看我上面的例子。现在，如果文本颜色变为红色，则没有显示类别为.medBlueText的红色文本的元素。

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

来源

2017-09-12 15:56:39 hungerstar

我的CSS串跳跃一行

回答

相关问题