CSS - Full width problem still occurring with position absolute

Question

I am trying to automatically set the width of two elements to fit their contents properly. When I tried to use position: absolute these elements would overlap each over.

 body { color: black; background-color: white; font-family: monospace; } li { position: absolute; list-style: none; border: 1px solid black; margin: 1%; } a { color: black; text-decoration: none; }

 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/styles/style.css"> <title>FrontEnd Developer</title> </head> <body> <header> <nav> <ul> <div class="navigation_item"> <li><a href="#about">about</a></li> </div> <div class="navigation_item"> <li><a href="#contact">contact</a></li> </div> </ul> </nav> </header> </body> </html>

Answer 1

There are countless ways to do this but I tried to do it based on what you have already.

 body { color: black; background-color: white; font-family: monospace; }.navigation_item { display: flex; } li { list-style: none; display: flex; flex-direction: row; border: 1px solid black; padding: 12px; margin: 3px; } a { color: black; text-decoration: none; }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1,0, user-scalable=no, shrink-to-fit=no" /> </head> <header> <nav> <ul> <div class="navigation_item"> <li><a href="#about">about</a></li> <li><a href="#contact">this can be as long or as short as you want</a></li> </div> </ul> </nav> </header> </html>

CSS - Full width problem still occurring with position absolute

Question

1 answers

solution1
0 2021-11-28 04:14:11

CSS - Full width problem still occurring with position absolute

Question

1 answers

solution1 0 2021-11-28 04:14:11

solution1
0 2021-11-28 04:14:11