html - Horizontally align links so that they are evenly spaced within the nav -


update: sorry confusion, thought couldn't use table, apparently can.

i'm trying find out how evenly space links within nav have equal amount of space between them. have researched little , suggestions suggest using list or table, cannot use (i think).

.title {    float: left;    font: bold 52px moon, arial, sans-serif;    margin-left: 2%;  }  .top {    background-color: #000;    color: #fff;  }  @font-face {    font-family: moon;    src: url(https://dl.dropboxusercontent.com/u/105222237/fonts/moon%20bold.otf);  }  @font-face {    font-family: coco;    src: url(https://dl.dropboxusercontent.com/u/105222237/fonts/cocopuff-regular.ttf);  }  nav {    position: relative;    display: inline-block;    margin-top: 10px;    outline: none;    color: #fff;    text-decoration: none;    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);    font-size: 1.35em;    font-family: coco, arial;  }  nav a:hover,  nav a:focus {    outline: none;  }  .cl-effect-4 {    padding: 0 0 5px;  }  .cl-effect-4 a::after {    position: absolute;    top: 100%;    left: 0;    width: 100%;    height: 1px;    background: #fff;    content: '';    opacity: 0;    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;    transition: height 0.3s, opacity 0.3s, transform 0.3s;    -webkit-transform: translatey(-10px);    -moz-transform: translatey(-10px);    transform: translatey(-10px);  }  .cl-effect-4 a:hover::after,  .cl-effect-4 a:focus::after {    height: 5px;    opacity: 1;    -webkit-transform: translatey(0px);    -moz-transform: translatey(0px);    transform: translatey(0px);  }  nav {    float: left  }  body {    background-color: black;  }
<div class="top">    <div class="title">      codecatek    </div>    <nav class="cl-effect-4">      <a href="">link</a>      <a href="">link</a>      <a href="">link</a>    </nav>  </div>

you can use flexbox this, , use justify-content: space-around css property.

great intro flexbox here: http://flexboxin5.com/


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more