All geek questions in one place

Why won't my CSS style input be next to its shortcut?

I am creating a simple web form, and one of my input fields will simply not dress left as intended, but it sits to the right of the previous form field. I reduced my form to a very simple text case.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> <style> #new-thing { width: 450px; } #new-thing label { clear: left; float: left; width: 120px; font-weight: bold; } #new-thing input { width: 250px; margin-bottom: .5em; } </style> </head> <body> <div id='new-thing'> <form> <label for='name'>Thing Name:</label> <input id='name'> <label for='first-thing'>First:</label> <input id='first-thing' style='width:6em;'> <label for='second-thing'>Second:</label> <input id='second-thing' style='width:6em;'> </form> </div> </body> </html>

The second field should be below the first, next to the label "Second:", but instead it is to the right of the first field. See this screen binding:

enter image description here

What did I miss?

+4
source share
2 answers

Because you did not leave your entrances to the left.

Change #new-thing input as follows:

 #new-thing input { float: left; width: 250px; margin-bottom: .5em; }

See here

+5
source

Try the following:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> <style> #new-thing { width: 450px; } #new-thing label { clear: left; float: left; width: 120px; font-weight: bold; } #new-thing input { width: 250px; margin-bottom: .5em; } </style> </head> <body> <div id='new-thing'> <form> <table> <tr> <td><label for='name'>Thing Name:</label></td> <td><input id='name' /></td> </tr> <tr> <td><label for='first-thing'>First:</label></td> <td><input id='first-thing' style='width:6em;' /></td> </tr> <tr> <td><label for='second-thing'>Second:</label></td> <td><input id='second-thing' style='width:6em;' /></td> </tr> </table> </form> </div> </body> </html>
-1
source

Source: https://habr.com/ru/post/1432864/

More articles:


All Articles