CODEWITHSUNDEEP
htmlcsscss-float
user2045025
user2045025

Reputation:

horizontal alignment of the lists

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>

Upvotes: 0

Views: 70

Answers (2)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 20007

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.

Upvotes: 0

James
James

Reputation: 112000

Use float:left;:

ul { clear: left; } // clear logo img
li { float: left; }

E.g. http://jsfiddle.net/JNyQU/4/

Upvotes: 1

Related Questions