How would it be better to add these buttons?

body { background: #f3f2f3; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } #container { background: #FFFFFF; width: 80%; margin: auto; height: 100%px; } #header { background: #838283; height: 5%; width: 100%; } #menu { background: #333333; float: left; width: 10%; height: 600px; } #canvas { background: #d2d033; float: left; width: 80%; height: 600px; } #menu2 { background: #333333; float:right; width: 10%; height: 600px; } #navigation { float:right; background: #ff22ff; width: 100%; height: 20px; } 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="111.css" /> </head> <body> <div id="container"> <div id="header"> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> </div> <div id="menu"> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> </div> <canvas id="canvas" width="480" height="400";></canvas> <div id="menu2"> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> <a id="downloadLnk" download="img.jpg">download</a> </div> <div id="navigation">Блок навигации </div> </div> </body> </html>

    1 answer 1

    Information is really little:

    1. Once the title is "uniformly", then the text-align should be justify. However, in the example below, I added one block that is aligned to the left — purely for clarity =) <nav> , so now it’s customary to wrap menu items.
    2. Since nothing is said about browser support, I allowed myself a small hack in the form of using flexboxes, which are not supported in IE, below the 11th.
    3. Your question in the styles for the container indicated height: 100%px; that is clearly a mistake.

    Total we have:

    HTML

     <div class="container"> <div class="header"> <ul class="items"> <li><a>First Link</a></li> <li><a>Second Link</a></li> <li><a>Third Link</a></li> <li><a>Fourth Link</a></li> <li><a>Fifth Link</a></li> </ul> </div> <div class="menu"> <nav> <a>First Link</a> <a>Second Link</a> <a>Third Link</a> </nav> </div> <canvas id="canvas" width="480" height="400";></canvas> <div class="menu2"> <ul class="items"> <li><a>First Link</a></li> <li><a>Second Link</a></li> <li><a>Third Link</a></li> <li><a>Fourth Link</a></li> <li><a>Fifth Link</a></li> </ul> </div> </div>

    CSS:

     .container { background: yellow; width: 80%; margin: auto; height: 100%px; } /* First block */ .header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } .header::after, .menu::after, .menu2::after { content: ''; display: inline-block; width: 100%; } ul { list-style: none; padding: 0; margin: 0; } .items { display: flex; justify-content: space-between; } /* Second and third blocks */ .menu, .menu2 { text-align: justify; height: 8em; padding: 2em 5%; background: #0023ab; color: #fff; } .menu nav { display: inline-block; vertical-align: middle; text-align: left; } .menu nav a{ padding: 0 0.6em; white-space: nowrap; } .menu nav a:last-child { padding-right: 0; }