Question

how to make the lists to display inline……..
now it is in vertical alignment can i make it into horizontal alignment….
providing my fiddle link below….

http://jsfiddle.net/JNyQU/1/

<ul class="homePageLists" style="">
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                Menu
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Search
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Create PN
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Product List
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Create PN
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; ">
                              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                              Create PN
                            </li>
                        </ul>

Answer 1

I have included a jFiddle for you.

http://jsfiddle.net/persianturtle/JNyQU/6/

The solution was to add a class to the container of the unordered menu list, which I called “inline.”

The CSS was:

.inline ul {
  float:left;
  display:inline;
}

.inline ul li {
  float:left;
  display:inline;
}

The only HTML I changed was:

<div class="inline">

Hope this helps you! If it does, please don’t forget the check mark!

Also, I added some margin to the left so it looks better! You can change that however you like.