css - How to align elements in navbar right without using float? -


I have a navigation bar with 3 sections:

  • A logo
  • A search bar
  • Some of the grouped menu options

    I should see something like this where the logo has been aligned, in the search bar A left padding, and grouped links are on the right:

    Enter image details here < / P>

    If I try to float the group on the right, then in between Do not align vertically.

      & lt; Nav> & Lt; One square = 'logo-link' href = "#" & gt; Example & lt; / A & gt; & Lt; Div class = "search" & gt; & Lt; Form acceptable-charset = "UTF-8" action = "/ search" method = "go" & gt; & Lt; div style = "margin: 0; padding: 0; display: inline" & gt; & Lt; / Div & gt; & Lt; Input class = "main_search" type = "text" / & gt; & Lt; Input class = "inline_search" type = "submit" value = "search" /> & Lt; / Form & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; div class = "anchor link" & gt; & Lt; A href = "#" & gt; Blogs & lt; / A & gt; & Lt; / Div & gt; & Lt; div class = "anchor link" & gt; & Lt; A href = "#" & gt; Login & lt; / A & gt; & Lt; / Div & gt; & Lt; div class = "anchor link" & gt; & Lt; A href = "#" & gt; Register & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Neo & gt;   

    I have attached one.

    You can either use

    text-align: justify; + Display: Inline-Block; , then you can use it:

    display: flex : medium; > + Joint-content: Space: Between; You can again use the margin: auto; Center on both axes

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -