html - Add margin to inline-block element independently -


I want to apply a number of space before an element in an unordered list. Here is the URL:. I try to centralize the picture of the dog with the logo in the middle of the other list elements. But there is uneven space among elements "Recent works" and "About us". My markup is:

  & lt; Div id = "navbar" class = "navbar navbar-inverse navbar-fixed-top" & gt; & Lt; Div class = "navbar-inner" & gt; & Lt; Div class = "container" & gt; & Lt; A class = "btn btn-nebahar" data-toggle = "collapse" data-target = ". -Nav-collapse" & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt; H1 & gt; & Lt; A class = "brand" id = "cf" href = "#" & gt; & Lt; Img class = "down" src = "hottdogg.png" data-min-width-481 = "hotdog png" alt = "tipit" & gt; Img class = "top" src = "hottdogg.png" data-minute-width -481 = "hottdoggHover.png" alt = "tip" & gt; & Lt; / A & gt; & Lt; / H1> & Lt; Nav class = "nav-collapse collapse" role = "navigation" & gt; & Lt; H2 square = "visuallyhidden" & gt; Navigation & lt; / H2 & gt; & Lt; Ul class = "nav" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "# home" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Recent Job" & gt; Recent work & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "divider" & gt; & Lt; / Li & gt; & Lt; Li style = "margin-left: 20px" & gt; & Lt; A href = "#About us" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# contact-us" & gt; Contact us & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

and CSS:

  #navbar .nav {font-size: 0; Text align: center; White-space: Abrop; Float: None; Margin: 0; } #navbar .nav li {display: inline-block; Float: None; } # Navbar .nav a {margin-bottom: 0; Font-size: 16px; Line-height: 37px; Height: 37px; Padding-left: 1.4 m; Padding-right: 1.4mm; } #November Dividers {width: 186px; }   

For me, NAV is quite confusing, why not divider and everyone together Simple solution to go for? nav {margin: 0 auto; Border: 1px dashed black; Text-align: center; } NAV {status: relative; Top: -100px; Display: inline-block; Vertical-align: medium; Padding: 10px; Text-align: left; } & Lt; Nav> & Lt; A href = "" & gt; Home & lt; / A & gt; & Lt; A href = "" & gt; LOOOOOOONG & lt; / A & gt; & Lt; Img src = "http://hottdoggfilms.com/hottdoggHover.png" alt = "" / & gt; & Lt; A href = "" & gt; Shrt & lt; / A & gt; & Lt; A href = "" & gt; Luoge & lt; / A & gt; & Lt; / Neo & gt;


Comments

Popular posts from this blog

winforms - C# Form - Property Change -

java - Messages from .properties file do not display UTF-8 characters -

javascript - amcharts makechart not working -