All geek questions in one place

Align two text fragments with different font sizes vertically using CSS

At the top of my page, I want the page title to be aligned to the left of the screen with a short navigation menu aligned to the right of the screen. I can achieve this with float, but the two elements have different baselines, i.e. the source text of the text looks different. Is there any way to make this work with css? I have an example of what I'm trying to do on jsfiddle http://jsfiddle.net/nBPCG/63/

+6
source share
2 answers

Hi, you can use display: inline block in h1

or see Fiddle: - http://jsfiddle.net/nBPCG/101/

+1
source

First, I would suggest using ul to transfer links, not h3 , this structure does not make sense. Then I just add an addition to ul . Here's a cleared markup example:

 <article > <header> <h1>This is Title</h1> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Works</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> </ul> </nav> <div class="clr"></div> </header> </article>

And styles:

 body { font-family:"Verdana", Verdana, sans-serif; font-size: 1em; font-weight:400; } h1 { font-family:"Century Gothic", Verdana, sans-serif; font-size: 4em; font-weight:400; float: left; margin-left:10px; } header nav { margin-right: 10px; float: right; } nav ul { list-style-type: none; margin: 0; padding: 2em 0 0 0; } nav ul li { display: inline; font-size: 1.2em; font-weight:400; } nav a { padding: 0 1em; border-right: 1px solid #000; } nav li:last-child a { padding-right: 0; border-right: none; } .clr {clear:both;}

Fiddle: http://jsfiddle.net/nBPCG/98/

0
source

Source: https://habr.com/ru/post/911369/

More articles:


All Articles