Моя строка 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 является элементом уровня блока. Он всегда будет занимать всю ширину содержащего его элемента. Что означает, что он собирается начать на новой линии. Используйте встроенный элемент, такой как 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,

---

Я хотел бы взглянуть на использование другого соглашения об именах для классов CSS, которое не использует определенные значения свойств, такие как синий. Смотрите мой пример выше. Теперь, если цвет текста изменится на красный, у вас нет элемента, отображающего красный текст с классом.medBlueText,

Возможно, вы захотите отойти от таблиц для вашей формы. Не обязательно, но они гораздо менее гибки, чем использованиеdivs. Вы могли бы даже хотеть работать вflexbox,

Answer 2

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