Как сделать так, чтобы этот HTML-код не переходил на другую строку

Question

Это мой код:

<form>
    <p>Username: </p><input type="text" name="username" />
    <p>Password: </p><input type="text" name="password" />
    <br /><input type="submit" value="Submit" />
</form>

По какой-то интересной причине он переходит к другой строке для любого абзаца и текстового поля.Что я могу сделать, чтобы предотвратить это?

Answer 1

p тег по умолчанию "display: block", что означаетдо и после того, как p добавлено браузером, поэтому причина перехода к следующей строке.

включает метку и текстовое поле в "p"

<form>
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="text" name="password" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

Answer 2

Они переходят на новую строку из-за вашей разметки.Теги абзаца (<p>) переносятся на новую строку, как и разрывы (<br>).Я бы предложил использовать теги <span> вместо тегов абзаца и удалить разрыв строки.

Answer 3

Сделайте это:

<form>
    Username: <input type="text" name="username" />
<br/>
    Password: <input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>

или

<form>
    Username:<br/> <input type="text" name="username" />
<br/>
    Password:<br/> <input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>

Answer 4

<form>
  <div style="float: left;">Username: <input type="text" name="username" /></div>
  <div style="float: left;">Password: <input type="text" name="password" /></div>
  <div style="clear: both;"></div>
  <input type="submit" value="Submit" />
</form>

Answer 5

Поместите теги абзаца вокруг ввода также. Тэг P в основном делает разрыв строки в конце самого себя.

<form>
    <p>Username: <input type="text" name="username" /></p>
    <p>Password: <input type="text" name="password" /></p>
    <br /><input type="submit" value="Submit" />
</form>