我的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串跳躍一行

回答

相關問題