Inline function

I find myself often abusing the use of tabels in my webpage. As I try to avoid the use of tables in my pages, I’ve discoved the use of the ‘inline’ function to be usefull. I didn’t see this listed in any of the tutorials, so I thought I’d pass it along.

Say you have a few elements such as paragraphs, headers or lists that you want to display horizontally of each other without having a line break. All you have to do is set the style of that element to ‘display:inline’. For example, let’s say you have a paragraph and you want two headers on either side, on the same line. The code for this line of elements would look something like:

<h1 style=’display:inline’> Header 1 </h1>

<p style=’display:inline’> Paragraph </p>

<h2 style=’display:inline’> Header </h2>

These elements will then appear side-by-side of each other. This technique can be used to quickly make a horizontal list or a similar display without the use of a table.

-Zach Aaron


~ by zaa918 on September 23, 2012.

One Response to “Inline function”

  1. Dear Zach,

    I like how your post is short and concise. You addressed an issue you found previously to not knowing this technique then continued on to share what you had discovered. Some parts however are a bit vague. As I am new to HTML I don’t know all of the vocabulary and pictures may have filled this gap. Maybe a visual of how your page was previously and how it changed after the new additions? Nonetheless, well done 🙂

    -Felice Amoo-Achampong

Comments are closed.

%d bloggers like this: