locked
How to place the last <li> on the top right side of my page? RRS feed

  • Question

  • User1183902823 posted

    I want to move the last li to top right side and also it need to be aligned with menu text called Home | About | Contact but my CSS is not working.

    here is my css which i tried but no luck.

    body {
        margin: 10px;
    }
    
            ul li {
                list-style: none;
            }
    
            .navbar ul {
                border: 1px solid red;
                padding: 0;
                margin: 50px;
            }
    
            .navbar ul:after {
                /* clearfix */
                content: "";
                display: table;
                clear: both;
            }
    
            .navbar li {
                float: left; /* all li items */
                padding: 0;
                margin: 0;
                border: 1px solid green;
                list-style: none;
            }
    
                .navbar li:last-child {
                    float: right; /* last li item */
                }
    
    
            .gCountryFlag {
                margin-left: 0;
                padding-left: 0;
            }
    
                .gCountryFlag li {
                    float: left;
                    display: inline-block;
                    margin: 5px;
                }

    my full html can be found here https://jsfiddle.net/g2upojoc/1/

    please tell me what i need to modify in css code. thanks

    Tuesday, December 5, 2017 2:31 PM

Answers

  • User61956409 posted

    Hi tridip1974,<o:p></o:p>

    <o:p>

    move the last li to top right side and also it need to be aligned with menu text
    </o:p>

    Based on your code, I do the following updates to set the width property of <ul class="nav navbar-nav"> to 100% fill it’s parent element, which can make the flag display at the edge of right side. You can try it.<o:p></o:p>

    With Regards, <o:p></o:p>

    Fei Han<o:p></o:p>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 25, 2017 9:03 AM

All replies

  • User-707554951 posted

    Hi tridip1974,

    Just use the following code to achieve what you want

       .navbar li:last-child {
                    float: right; /* last li item */
                    top:10px;
                }

    Woks code as below:

    https://jsfiddle.net/g2upojoc/9/

    Best regards 

    Cathy

    Wednesday, December 6, 2017 7:29 AM
  • User1183902823 posted

    i checked your jsfiddle but found still flag is not coming at right corner of page. it is coming right side along with menu text but i want flag should be placed at edge of right side. please change what is requited.

    please check this url https://jsfiddle.net/d7dtm4we/ see there how flag image is coming. flag is coming at the rightes most of the page and flag align also with menu.

    so please modify your code and get me fresh one. thanks

    thanks

    Thursday, December 7, 2017 11:35 AM
  • User-707554951 posted

    Hi tridip1974

    Are you want something as below?

    https://jsfiddle.net/g2upojoc/12/

    Best regards 

    Cathy

    Monday, December 11, 2017 1:50 AM
  • User1183902823 posted

    flag image is not showing when i resize the html view area of jsfiddle. when view area is small then flag area is coming....why?

    please increase the view area of jsfiddle where menu and flag is coming then you can understand the problem. thanks for your time.

    Monday, December 11, 2017 9:51 AM
  • User61956409 posted

    Hi tridip1974,<o:p></o:p>

    <o:p>

    move the last li to top right side and also it need to be aligned with menu text
    </o:p>

    Based on your code, I do the following updates to set the width property of <ul class="nav navbar-nav"> to 100% fill it’s parent element, which can make the flag display at the edge of right side. You can try it.<o:p></o:p>

    With Regards, <o:p></o:p>

    Fei Han<o:p></o:p>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 25, 2017 9:03 AM