css - Keep div's from pushing each other -


the picture layout want when hover, gets messed up. div's start shifting around , moving horizontally when next div italicizes. how can maintain exact layout 100% of time? enter image description here

.project-link { font-family: 'utopiastd';    color:#010202; font-size:5.6vw; white-space:nowrap; text-decoration:none; margin-right: 3%; line-height:125%; border-bottom: solid transparent 2px; } 

https://jsfiddle.net/zjkouzbo/1/

solution 1:

you had right idea trying white-space:nowrap. keep first 2 links , keep them on 1 line, wrap them in parent element , apply white-space:nowrap parent element. if have on both anchor elements , parent elements, won't break lines in middle of link or between them.

<div class="line">   <a class="project-link" id="one" href="#modal1">maru speaker design <span> (1) </span> </a>   <a class="project-link" id="two" href="#modal2">lights — out  <span> (2) </span></a> </div> 

css

.line{   white-space: nowrap; } 

new fiddle: https://jsfiddle.net/zjkouzbo/2/

solution 2:

place non-breaking space between anchor elements want keep on same line using html entity &nbsp;. make sure take out other spaces, including line breaks, between 2 elements. makes code little annoying read, doesn't suffer "div-itis" solution 1 does.

<a class="project-link" id="one" href="#modal1">maru speaker design <span> (1) </span> </a>&nbsp;<a class="project-link" id="two" href="#modal2">lights — out  <span> (2) </span></a> 

second fiddle: https://jsfiddle.net/zjkouzbo/3/


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -