CODEWITHSUNDEEP
htmlcss
Liam Macmillan
Liam Macmillan

Reputation: 398

How do I float a <li> to the right in CSS?

I've got a header that acts as table and I'm trying to float the last li to the right.

I've tried setting the padding-right % of the 5th li to appear at the end but obviously this isn't ideal as on other screens it causes issues. I've also tried to float it to the right, but it messes up the vertical alignment. Any suggestions?

enter image description here

#header ul {
    width: 100%;
    float: left;
    margin: 0;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header ul li { 
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

/* Logo */
#header li:nth-child(1) {
    font-size: 40px;
    font-family: serif;
    font-weight: bold;
    padding-right: 4%;
}

/* Back & Forward buttons */
#header li:nth-child(2) {
    padding-right: 8.2%;
}

/* Search box */
#header li:nth-child(3) {
    padding-right: 4.5%;
}

/* Break line */
#header li:nth-child(4) {
    padding-right: 2%;
}

/* Icons */
#header li:nth-child(5) {}

/* Icons */
#header li:nth-child(6) {
    border: 1px dotted red;
}
<div id="header">
    <ul>
        <!-- Logo -->
        <li width="10%"><div>B</div></li>
        <!-- Back / forward buttons -->
        <li>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
        </li>
        <!-- Search box -->
        <li>
            <input type="search" id="search" size="30" placeholder="What are you looking for?" />
        </li>
        <!-- Break line -->
        <li>
            <span class="hdr-break"></span>
        </li>
        <!-- Icons -->
        <li>
            <i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
            <i class="material-icons md-26 icn-lft icn-map">map</i>
            <i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
            <i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
        </li>
        <!-- This should float right -->
        <li>
            <p>x</p>
        </li>
    </ul>
</div>

Upvotes: 2

Views: 3741

Answers (4)

dreamweaver
dreamweaver

Reputation: 303

Try using:

#header li:last-child {
  right: 20px;
  top: 10px;
  position: absolute;
  height: 50px;
}

Upvotes: 0

Asons
Asons

Reputation: 87191

With your existing code, all you need to do is to remove float:left; and add display: table.

#header ul {
        width: 100%;
        display: table;
        ....

And here is your code snippet showing it.

#header ul {
    width: 100%;
    display: table;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header ul li { 
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

/* Logo */
#header li:nth-child(1) {
    font-size: 40px;
    font-family: serif;
    font-weight: bold;
    padding-right: 4%;
}

/* Back & Forward buttons */
#header li:nth-child(2) {
    padding-right: 8.2%;
}

/* Search box */
#header li:nth-child(3) {
    padding-right: 4.5%;
}

/* Break line */
#header li:nth-child(4) {
    padding-right: 2%;
}

/* Icons */
#header li:nth-child(5) {}

/* Icons */
#header li:nth-child(6) {
    border: 1px dotted red;
}
<div id="header">
    <ul>
        <!-- Logo -->
        <li width="10%"><div>B</div></li>
        <!-- Back / forward buttons -->
        <li>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
        </li>
        <!-- Search box -->
        <li>
            <input type="search" id="search" size="30" placeholder="What are you looking for?" />
        </li>
        <!-- Break line -->
        <li>
            <span class="hdr-break"></span>
        </li>
        <!-- Icons -->
        <li>
            <i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
            <i class="material-icons md-26 icn-lft icn-map">map</i>
            <i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
            <i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
        </li>
        <!-- This should float right -->
        <li>
            <p>x</p>
        </li>
    </ul>
</div>

Upvotes: 2

Stickers
Stickers

Reputation: 78676

If you can use flexbox, it can be done quite easily. Use align-items: center; will get the items vertically centered. With last item set to margin-left: auto; to send the "x" icon to the far right.

Run the snippet below and click "Full page" to see.

#header ul {
    width: 100%;
    /* float: left; */
    margin: 0;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    display: flex;
    align-items: center;
}

#header ul li { 
    height: 100%;
    /* display: table-cell; */
    /* vertical-align: middle; */
}

/* Logo */
#header li:nth-child(1) {
    font-size: 40px;
    font-family: serif;
    font-weight: bold;
    padding-right: 4%;
}

/* Back & Forward buttons */
#header li:nth-child(2) {
    padding-right: 8.2%;
}

/* Search box */
#header li:nth-child(3) {
    padding-right: 4.5%;
}

/* Break line */
#header li:nth-child(4) {
    padding-right: 2%;
}

/* Icons */
#header li:nth-child(5) {}

/* Icons */
#header li:nth-child(6) {
    border: 1px dotted red;
    margin-left: auto;
}
<div id="header">
    <ul>
        <!-- Logo -->
        <li width="10%"><div>B</div></li>
        <!-- Back / forward buttons -->
        <li>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
        </li>
        <!-- Search box -->
        <li>
            <input type="search" id="search" size="30" placeholder="What are you looking for?" />
        </li>
        <!-- Break line -->
        <li>
            <span class="hdr-break"></span>
        </li>
        <!-- Icons -->
        <li>
            <i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
            <i class="material-icons md-26 icn-lft icn-map">map</i>
            <i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
            <i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
        </li>
        <!-- This should float right -->
        <li>
            <p>x</p>
        </li>
    </ul>
</div>

Upvotes: 4

Keith
Keith

Reputation: 4147

All you have to do is use last-child. Right now you are using display: table-cell, switch it to inline-block and this will work.

CSS

 #header li:last-child { float: right; }

 #header ul li { display: inline-block; }

Upvotes: -2

Related Questions