How to place the last <li> on the top right side of my page?[Answered] RSS

• • Reply
  tridip1974

  Member

  228 Points

  301 Posts

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

  Dec 05, 2017 02:31 PM|tridip1974|LINK

  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

• • Reply
  Cathy Zou

  Star

  8670 Points

  2882 Posts

  Re: How to place the last <li> on the top right side of my page?

  Dec 06, 2017 07:29 AM|Cathy Zou|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  tridip1974

  Member

  228 Points

  301 Posts

  Re: How to place the last <li> on the top right side of my page?

  Dec 07, 2017 11:35 AM|tridip1974|LINK

  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

• • Reply
  Cathy Zou

  Star

  8670 Points

  2882 Posts

  Re: How to place the last <li> on the top right side of my page?

  Dec 11, 2017 01:50 AM|Cathy Zou|LINK

  Hi tridip1974

  Are you want something as below?

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

  Best regards 

  Cathy

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  tridip1974

  Member

  228 Points

  301 Posts

  Re: How to place the last <li> on the top right side of my page?

  Dec 11, 2017 09:51 AM|tridip1974|LINK

  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.

• • Reply
  Fei Han - MS...

  All-Star

  40535 Points

  6233 Posts

  Microsoft

  Re: How to place the last <li> on the top right side of my page?

  Dec 25, 2017 09:03 AM|Fei Han - MSFT|LINK

  Hi tridip1974,

  tridip1974

  move the last li to top right side and also it need to be aligned with menu text

  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.

  

  With Regards,

  Fei Han

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.