CODEWITHSUNDEEP
htmlcssalignmenthtml-liststext-align
KViiTEN
KViiTEN

Reputation: 95

How to put HTML elements in a line?

I've got this code...

        <div class="header">
            <div class="mainh">

                <div class="table">

                    <ul>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                    </ul>
                </div>

            </div>          
        </div>

And what I want is to put the ul, li and a in a single line with the same distance between them.
How do I make it?

BTW I tried something. What I tried:

div.table ul li a {
    display: block;
}

...but it doesn't change the alignment.

Upvotes: 3

Views: 427

Answers (5)

Majed Badawi
Majed Badawi

Reputation: 28424

Try this:

ul li { float: left; margin-right:30px; }
<div class="header">
  <div class="mainh">
    <div class="table">
      <ul>
        <li><a>smth</a></li>
        <li><a>smth</a></li>
        <li><a>smth</a></li>
        <li><a>smth</a></li>
        <li><a>smth</a></li>
      </ul>
    </div>
  </div>          
</div>

Upvotes: 3

Q-1
Q-1

Reputation: 26

ul li 
{
   float: left; /* To make it in a single line */
   margin-right: 50px; /* Distance */
   margin-left: 50px; /* Distance */
}

Upvotes: 1

simon
simon

Reputation: 11

Change your display to inline instead of block. block would make it list in multiple lines. Inline would make it look like a header menu in one line

Upvotes: 1

Anthony Qu&#233;r&#233;
Anthony Qu&#233;r&#233;

Reputation: 51

try this : 

.ul {
display: flex;
justify-content: space-evenly;
}

Upvotes: 1

RatajS
RatajS

Reputation: 1429

li {
  display: inline;
}
        <div class="header">
            <div class="mainh">

                <div class="table">

                    <ul>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                    </ul>
                </div>

            </div>          
        </div>

Upvotes: 1

Related Questions