How do I put tabs in HTML page

Question

I have a web page with the menu bar at the top.

I know to put tab in HTML and it can be done like that:

<p style="text-indent: 5em;"> The first line of this paragraph will be indented about five characters, similar to a tabbed indent. </p>

But my question would be how to do the similar thing inside the menu bar? Here is my code.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <html> <head> <title></title> <style> div.ex { width:300px; padding:10px; border:5px solid gray; background: white; margin-left:auto; margin-right:auto; margin-top: 200px; position: relative; } p.x { color: white; font:25px arial,sans-serif; position:relative; left:20px; } .align { position: absolute; left: 8em; } body { background-color: #ebebeb; top: 55px; } #rectangle { width: 100%; height: 70px; background: deepskyblue; position: fixed; top: 0; left: 0; bottom: 20; } input[type=button] { background-color: lawngreen; color: white; } #text { padding-top: 80px; } </Style> </head> <body> <div id="rectangle"> <p class="x">Home Page <a href="personal?id=${id}"><input type="button" name="sign up" value="Sign Up"/></a> <a href="hello">Home</a> </p> </div> <h1 id="text">Hello world, this is your home page.</h1> <div class="ex"> <h1>签订</h1> <hr> ${errorMessage} <form action="register" method="post"> <p> <label> ID： <input type="text" name="id" value="${person.id}" class="align"/> </label> </p> <p> <label> 密码： <input type="password" name="password" class="align"/> </label> </p> <p> <label> 确认密码： <input type="password" name="password" class="align"/> </label> </p> <p> <label> 姓名： <input type="text" name="name" value="${person.name}" class="align"/> </label> </p> <p> <label> 地址： <input type="text" name="address" value="${person.address}" class="align"/> </label> </p> <p> <label> 电话： <input type="text" name="phoneNumber" value="${person.phoneNumber}" class="align"/> </label> </p> <input type="submit" value="注册"/> </form> </div> </body> </html>

In other words, I'd like to put tabs between "sign up" button and "Home" hyperlink. Both are placed in the blue rectangle.

I appreciate if someone could help me.

I want them to be seperated using regular tabs, but I know HTML doesn't have the tab field. How can I achieve similar thing? — user3014926
– user3014926, Commented Jan 2, 2014 at 21:31

Jukka K. Korpela · Accepted Answer · 2014-01-02 21:30:05Z

It seems that by “tab”, you really mean horizontal spacing. In that case, set a suitable horizontal margin on some element, e.g.

<input type="button" name="sign up" value="Sign Up" style="margin-right: 5em"/> <a href="hello">Home</a>

(Your code needs fixing. For example, an a element must not contain an input element. But this does not affect the spacing issue.)

What if "<input type="button" name="sign up" value="Sign Up" style="margin-right: 5em"/>" was just a regular words though?
To create horizontal spacing between two groups of regular words, you need to wrap at least one of the groups in a text-level element, like span, and set right or left margin or padding on it.

Diodeus - James MacFarlane · Accepted Answer · 2014-01-02 21:28:45Z

You are using the wrong HTML pattern.

Use an unordered list and move the INPUT outside of the LABEL.

<ul> <li> <label for="name">Name</label> <input id="name" /> </li> <li> <label for="address1">Address</label> <input id="address1" /> </li> <li> .... </ul>

CSS:

label, input { display: inline-block; }

See: http://alistapart.com/article/prettyaccessibleforms

Irrelevant to the question asked, and a matter of opinion/style/school.

Collectives™ on Stack Overflow

How do I put tabs in HTML page

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related