Cómo hacer que este código HTML no pase a otra línea

Este es mi código hasta ahora:

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

For some interesting reason it is going to another line for ever paragraph and textbox. What can I do to prevent that?

preguntado el 08 de noviembre de 11 a las 18:11

Ummm...that's what paragraphs do by default. You can either remove the paragraph tags or move things around via CSS (eg by assigning the <p> tags in question to their own class and having your CSS say that those paragraph classes should be displayed in-line). -

5 Respuestas

Put your paragraph tags around the input also. The P tag basically does a line break at the end of itself.

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

respondido 08 nov., 11:22

Hacer esto:

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

or

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

respondido 08 nov., 11:22

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

respondido 08 nov., 11:22

They're dropping to a new line because of your markup. Paragraph (<p>) tags drop to a new line, as do breaks (<br>). Sugeriría usar <span> tags in place of the paragraph tags, and remove the line break.

respondido 08 nov., 11:22

p tag is by default "display: block" which means a <br /> before and after p is added by the browser, so is the reason it is going to the next line.

include both the label & textbox in "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>

respondido 08 nov., 11:22

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.